Vue.js 配列のプロパティを表示しようとするとエラーが発生する

Question

前提

ここに質問の内容を詳しく書いてください。
初質問です。
Vue.js3にて、配列のプロパティを表示しています。
画面上は正しく動作しているように見えるのですが、
なぜかコンソールにエラーが表示されてしまいます

実現したいこと

ここに実現したいことを箇条書きで書いてください。
エラーを発生させたくないです

発生している問題・エラーメッセージ

vue@3.1.5:1312 [Vue warn]: Unhandled error during execution of render function 
  at <App>
warn @ vue@3.1.5:1312
logError @ vue@3.1.5:1486
handleError @ vue@3.1.5:1478
renderComponentRoot @ vue@3.1.5:2549
componentEffect @ vue@3.1.5:6418
reactiveEffect @ vue@3.1.5:420
effect @ vue@3.1.5:395
setupRenderEffect @ vue@3.1.5:6371
mountComponent @ vue@3.1.5:6330
processComponent @ vue@3.1.5:6288
patch @ vue@3.1.5:5905
render @ vue@3.1.5:7008
mount @ vue@3.1.5:5344
app.mount @ vue@3.1.5:10247
(anonymous) @ main.js:11
vue@3.1.5:1492 Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at Proxy.render (eval at compileToFunction (vue@3.1.5:14862:23), <anonymous>:13:60)
    at renderComponentRoot (vue@3.1.5:2432:46)
    at componentEffect (vue@3.1.5:6418:59)
    at reactiveEffect (vue@3.1.5:420:26)
    at effect (vue@3.1.5:395:11)
    at setupRenderEffect (vue@3.1.5:6371:29)
    at mountComponent (vue@3.1.5:6330:11)
    at processComponent (vue@3.1.5:6288:19)
    at patch (vue@3.1.5:5905:23)

該当のソースコード

    <div id="app">
      <!-- エラーは出ない -->
      <p>{{userList[0]}}</p>

      <!-- エラーとなる -->
      <p>{{userList[0].name}}</p>
    </div>

const app = Vue.createApp({
  data() {
    return { userList: {} };
  },
  async created() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users", {
      methods: "GET",
    });
    this.userList = await response.json();
  },
}).mount("#app");

試したこと

試しに{{userList[0]}}と記述したところエラーは発生しませんでした。
あくまで要素のプロパティの指定に問題がありそうです。

Answer 1

そもそも

• {} これは普通は「配列」と言わず「オブジェクト」と言います。中身が空っぽなので「空のオブジェクト」ですね。
• [] こちらが配列です。

APIレスポンスも一度確認してみてください。 [ ... ] という形でレスポンスが返っています。

APIリクエストは非同期呼び出しなので、実際にDOMが表示されるタイミングから遅れてレスポンスが返ってきます。
そのため最初に画面表示を行ったタイミングでは userList は空のままです。
空のままの配列に userList[0] でアクセスすると undefined が返されますが、「未定義」というJavaScript上の値であって、この時点でエラーではありません。
しかし、 name プロパティへのアクセスが行われるとそのようなプロパティは存在しないためエラーになります。

Comments

[change]

失礼しました。配列の部分は誤記でした。

空のままの配列に userList[0] でアクセスすると undefined が返されますが、「未定義」というJavaScript上の値であって、この時点でエラーではありません。
しかし、 name プロパティへのアクセスが行われるとそのようなプロパティは存在しないためエラーになります。

そういうことでしたか!
何れにせよ画面描画の時点ではデータは取得できていないが、
userList[0]はエラーが発生しないので一見**画面描画の時点でデータが取得されている**ように見える。
ということですね。
ようやく理解ができました。

ちなみにですが、データ取得を待って画面描画を行う方法はないのでしょうか?
つまり、エラーを出さずに`userList[0].name`を指定したいです