Vueで配列をDOM作成前に読み込みたい

Question

Vue.jsでテンプレート内で配列を使用しています。
ものすごく省略すると下記の様な感じです。
createdなりmountedなりでaxiosで読み込んでいるので最終的にはちゃんと表示されますがConsoleには「Error in render: "TypeError: Cannot read property 'name' of undefined"」とエラーが表示されます。

そこで同期処理としてasync、awaitを使えば良いのか？と思いまして下記のように書いてみました。

<template>
    <div>
        <div>{{lists[0].name}}</div>
        <div>{{lists[1].name}}</div>
        <div>{{lists[2].name}}</div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      lists:[]
    }
  },
  created(){
    const main = async () => {
      var res = await axios.get("http://localhost/api/getLists.php");
      console.log(res);
      this.lists = res.data.lists;
    }

    main();

    console.log(this.lists);
  }
}
</script>

先に書いたとおり画面上にはaxiosも実行されているので最終的にはちゃんと表示されています。

期待している動作はcreatedでmain()が実行されてaxiosの受取を待機することで（同期することで）this.listsに配列が代入されることでテンプレートのエラーを表示したくないのです。
（data()内でlists配列の内容を空でちゃんを入れればエラーが出ないのは承知しています）

しかし実際はConsoleを見る限りCannot read property 'name'・・エラーの後にconsole.log(this.lists);が実行されてその後console.log(res);が実行されているように見えています。

期待している動作をさせるにはどう書いたらよいでしょうか？

Answer 1

先にテンプレートが評価されていることが原因です。
「lists[0].name」などを表示しようにも対象のデータがないためエラーとなっています。

データが注入されてから表示するように調整するか、v-forで書き出すようにすると良いと思います。
v-forのほうがデータの変更に強いのでおすすめです。

<div v-if="lists.length">
  <div>{{lists[0].name}}</div>
  <div>{{lists[1].name}}</div>
  <div>{{lists[2].name}}</div>
</div>
<!-- または -->
<div v-for="(item, index) in lists" :key="index">
  {{ item.name }}
</div>

Comments

[landy77]

対処法が若干面倒ですが納得できました！
なるほど、テンプレートとして作成した場合は何が何でも先に評価されてしまうんですね。
createdでもbeforecreatedでも先にテンプレートのエラーが出てしまうので何らかの解決があっても良いような気はするんですけどね・・・・

[nt4c]

Vueのライフサイクルをcreatedなどに登録した非同期処理が完了するまで次のステップに進めないでほしいというお考えですよね？
数年前に公式でも似たようなことが議論されていますが、ロジックを大幅に変える必要があり破壊的な修正となるため採用されませんでしたね。
https://github.com/vuejs/vue/issues/7209

どうしてもということであればNuxtなどを採用してサーバーサイドレンダリングするしかないかなと思います。