vueでdataに渡した配列の要素の取り出し方について

Question

vueでdataに渡した配列の要素をHTMLで表示したいのですが、
以下のような記述では表示できないのですが
どういった制限があるのでしょう？

[0]を指定せず、data.arrayを指定した際には["XXX", "YYY", "ZZZ"]と取得できるので原因が気になります。

<div id="app">
    <!-- 表示される -->
  {{data.array}}

    <!-- エラーになる -->
  {{data.array[0]}}
</div>

<script>
const obj = {
  id: "obj001",
  array: [
    "XXX",
    "YYY",
    "ZZZ",
  ],
};

const myApp = {
  data() {
    return { data: "" };
  },
  mounted() {
    this.data = obj;
  },
};
const app = Vue.createApp(myApp);
app.mount("#app");
</script>

成功する記述

以下のように記述すると問題なく表示されるのですが、
配列の要素をHTMLから取得する場合は、
data()に予め配列用のプロパティを準備するのが必須なのでしょうか?

<div id="app">
    <!-- 表示される -->
  {{myArray[0]}}
</div>

<script>
const myApp = {
  data() {
    return {
       data: "",
       myArray: []
     };
  },
  mounted() {
    this.data = obj;
    this.myArray = obj.array;
  },
};
const app = Vue.createApp(myApp);
app.mount("#app");
</script>

※Vueはバージョン3です

Comments

[believe]

alert(data);でデバックしてみて
undefinedと表示されないでしょうか？

Answer 1

vueはjsがエラーを吐くとその時点で落ちてしまうのでエラーが出ないようにしないといけません。
{{data.array[0]}}が記載されていると常時これを解決して値を取りに行きます。

やっていることを普通のjsのコンソールで書くと

var data = ""

data.array[0]

こんな感じのことをしているので「data.array」はundefinedですし
undefined[0]なんて取得できないのでエラーです。

{{data.array}}は最初undifiled（エラーではない）ですがmountedによって
値が与えられた結果["XXX", "YYY", "ZZZ"]が表示されているという２段階の動作によって表示されています。

ちなみにインスタンス作成時のcreatedというのがありますので
moutedの代わりにそちらを使えばエラーは出なくなると思いますが
そもそもobjを最初から入れておけばいいのでは？とも思います。

  data() {
    return { data: obj  };
  },
  /*mounted() {
    this.data = obj;
  },*/

Comments

[tmp-user]

ありがとうございます。

mounted前にデータを参照してしまっているんですね。
確かにcreatedを使えば正しくデータが取得できました。

mounted→レンダリング前に実行
created→レンダリング後に実行
という認識であっているでしょうか。

ただ、一点まだ理解ができていないのですが、
` return {
data: "",
myArray: []
};
`
という記述をしたときに参照できるのはなぜなのでしょう?
同じくmountedしているので何が違うのかが気になりました。

[sousuke]

気づくのがだいぶ遅くなりましたが一応。
myArrayの方でできるのはundefinedではないからです。

var data = ""
とした場合「{{data.array[0]}}」はdata.arrayがundefinedです。
var myArray = []
とした場合「{{myArray[0]}}」はmyArrayは空の配列で初期化されているので
エラーではないです。