vuexで管理している配列を画面に表示したい

Question

vuexで配列を保持しているのですが、保持している値を全て画面側に表示する方法が分かりません。
vuex公式を見てみたのですが、配列の取得方法は掲載されていませんでした。
単体で取得表示する方法はわかるのですが教えて頂きたいです。

やりたいことは以下です。
画面Aで値取得
画面B(別画面)で値表示&追加ボタンでB画面に戻り、繰り返すだけここに値が追加されていく

  state: {
    Alist: [{ name: ''}],
    A: ''
  }

　mutations: {
    updateA(state, payload) {
      state.A = payload
    },
    updateAlist(state, payload) {
      state.Alist = state.A[payload]
    },

<template>
  <v-btn @click="pushA(A), pushAlist(A)"></v-btn>
//実際にはリンゴやバナナのボタンがありますが省略しています
</template>

<script>
   methods: {
    pushA(A) {
      this.$store.commit('updateA', A)
    },
    pushAlist(A) {
      this.$store.commit('updateAlist', A)
    },
  },

<template>
  <v-row v-for="A in Alist" :key="A.id">
    <v-card v-for="a in A" :key="A.id" 
     height="30px" width="30px">{{ a }}</v-card>
  </v-row>
</template>

<script>
   computed: {
    Alist: function() {
      return this.$store.state.Alist
    }
  }
</script>

エラー内容追記します

//ターミナルのエラーはなくなりました

Comments

[plasticgrammer]

ソースが省略されすぎているので、何が原因で表示されないのかが判断できません。
（inで処理させること自体は間違っていないように思います）

関連ソースおよび発生しているJavascriptエラーなどありましたら、追記をお願いします。

Answer 1

一意なキー値を設定する key属性 の指定がないためにエラーとなっているようです。

https://jp.vuejs.org/v2/api/#key

Comments

[shirout]

お返事ありがとうございます。
keyを指定することでエラーはなくなりましたがv-cardそのものがまだ表示されない状態です。

[shirout]

(Emitted value instead of an instance of Error) <v-card v-for="a in Alist">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
警告としてまだ出ていました

[plasticgrammer]

参考サイトのURLを載せたのですが確認しましたか？
v-forを指定した要素と同じ要素で、一意となる値をkey属性へバインドしてみてください。

[shirout]

お返事に不備がありました。
警告、エラーともに解消したのですが、配列の値は表示されないままです。
参考サイトありがとうございます。

[plasticgrammer]

:key="A.id" としていますが、Aは文字列ですよね？
id属性はないと思いますが。

[shirout]

お返事ありがとうございます。
vuexと画面のコードを修正して現在は値を1つ画面に表示することができました。

しかし画面Aに戻って再度値を取得してB画面に行くと配列の中身が上書きされて1つしか表示されません。
エラーも出ておらず原因はvuexなのかなと考えています。

[plasticgrammer]

:key="key.id" としていますが、これは何の値を参照しているのでしょうか。
keyの実体がソースは存在していないようです。
参考サイトを再度参照してみてください。

[shirout]

丁寧にありがとうございます。
key部分をもう一度サイトを参照して修正しました。
まだ上書きされる状態ではあります。

[plasticgrammer]

以前、指摘した状態に戻ってしまいましたね。
（２つ前のコメントを参照してください）
参考サイトと同じ記述をするのではなく、内容を理解して対応をお願いします。

参考サイトを例にすると item は文字列ではなく、連想配列（{id:1, name:'abc'}のようなもの）となっており、item.idにより値が取得できる状態となっています。
また、このitem.idが複数のitemを識別できる一意な値であるため、key属性として使用しています。

[shirout]

物分かり悪くてすみません。
itemは配列であり、その中にはidやnameがある。
そして、item.idとすることで配列内のものを識別できるということですか？
今回の私の場合は:key="AList"が正解ということになるのでしょうか？

[plasticgrammer]

> itemは配列であり、その中にはidやnameがある。
> そして、item.idとすることで配列内のものを識別できるということですか？
参考サイトの例では、itemsが連想配列の配列で、itemが連想配列です。
itemには前述の例のようにidや他の値も保持しています。

> 今回の私の場合は:key="AList"が正解ということになるのでしょうか？
keyには繰り返し毎に一意となる値を設定しなければなりません。
何が一意となるかはこちらでは判断できないのでなんとも言えません。値（A）が一意になるなら、それでもよいのかもしれません。（AListはダメです）

繰り返しのindexをkeyに設定するような例もありますが、それで問題となるようなケースもあるようです。
https://qiita.com/FumioNonaka/items/d1d9c9335116426a8316

[shirout]

>keyには繰り返し毎に一意となる値を設定しなければなりません。
今回はAListにリンゴやバナナという値を入れてそれを表示しようとしています。
vuexのstateで配列を作っていますが、このつくり自体が間違っているのでしょうか？
Aという値が一意にになると判断したのですが変わらずでした。

[plasticgrammer]

> このつくり自体が間違っているのでしょうか？
間違っていないと思います。
ですが、掲載頂いているものが最新のソースではない気がするので何が問題なのかわかりません。

> Aという値が一意にになると判断したのですが変わらずでした。
v-forによるループが２つありますが、いずれも :key="A" ということですか？
だとしたら、key属性の役割や意味をまだ正確に理解できていないものと思います。
提示した公式サイト以外の資料を幾つかみて、理解を深めてみてください。

[shirout]

vuexの更新処理で、
state.ALIST.push(payload)と書くことで追加できました。

ご丁寧にありがとうございました。