vuexの配列を取得して表示したい

Question

vuexで保持している配列をv-forで取得して表示するにはどうすればよろしいでしょうか？

配列でなく普通の変数であれば以下の記述でstateのappleを取り出せるのですが配列のapplesを取り出すにはどうすればよろしいでしょうか？

<template>
  <v-card>{{ apple }}</v-card>
</template>

<script>
  computed: {
    apple() {
      return store.state.apple
    }
}
</script>

Answer 1

配列のapplesをv-forで表示する場合以下のようになります。

<template>
  <v-card v-for="apple in apples">
    {{ apple }}
  </v-card>
</template>

<script>
  computed: {
    apples () {
      return store.state.apples
    }
}
</script>

v-forの書き方は、以下のようになります。

v-for="変数名 in 配列"

配列から1要素ずつを取り出します。取り出した要素を変数名に格納し {{変数名}}に表示するというように利用することができます。
注意点としては、v-forを属性として持っているタグごと反復して表示するので、例えば一つのv-cardタグの中で配列の中身を取り出したい場合は、以下のように記述する必要があります。

<template>
  <v-card>
    <div v-for="apple in apples">
      {{ apple }}
    </div>
  </v-card>
</template>

ご参考になれば幸いです。

Comments

[shirout]

お返事ありがとうございます。
vuexのstateでは以下の記述でよろしいですか？

apple: '',
apples: []

[Twoshi]

ご確認いただきありがとうございます。

上記のご認識であっております。