親コンポーネントで格納したデータを子コンポーネントに反映できないです。(vue.js)

Question

前提・実現したいこと

投稿したデータをストアで格納して、投稿一覧のページに投稿テンプレートとして表示したいです。
初歩的な質問にはなるとは思いますが、御教示頂けますと幸いです。

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

エラーメッセージ 

該当のソースコード

post.vue(投稿フォーム)
<template>
           <v-card-text>
             <v-form>
               <v-textarea v-model="post"  label="学んだ事" outline></v-textarea>
            
                 <v-btn class="primary" @click="submit" >投稿</v-btn>
            

               <v-btn class="accent">削除</v-btn>
             </v-form>
           </v-card-text>
    



</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      post: []
    }
  },
  methods: {
    submit () {
      this.addPost(this.post)
      this.$router.push({name:'postsList'})
      this.post = []
    },
    ...mapActions(['addPost'])
  }
}
</script>

post.list(投稿一覧)
<template>


      <!-- <router-link :to="{ name: 'postsList' }"> -->
      <v-card-text>
        <v-form>
          <v-textarea :items='posts'  label="学んだ事" outline>
            <template v-slot:items="props">
                        <td class="text-xs-left">{{ props.item.posts }}</td>
                      </template>
          </v-textarea>
      <!-- </router-link> -->


    </v-form>
  </v-card-text>
</template>
<script>
export default {
created () {
  // 連絡先のデータをストアに取り行くようにする
  this.posts = this.$store.state.posts
},

  data (){
    return {
      posts: []
    }
  }
}
</script>



store.js

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  
    posts: []
  },
  mutations: {

    addPost (state, post) {
      state.posts.push(post)
    }
  },
  // コンポーネントのインターフェイスとなる部分
  actions: {
    
    // ミューテーションにpostを受け渡す
    addPost ({commit}, post) {
      commit('addPost', post)
    }
  },

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

Vuexストアのstateを参照したい場合はcomputedプロパティに記述しましょう。
提示されているコードの場合ですと、createdライフサイクルの後にstateに変更があった場合に変更が画面に反映されません。

また配列の内容を表示したい場合はv-forを使ってリストレンダリングしましょう。

以上のことを踏まえて一覧ページのコードを簡略化すると下記のような感じになります。

<template>
  <div v-for="(post, index) in posts" :key="index">
    {{ post }}
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['posts'])
  }
}
</script>

Comments

[kaksji]

拙い質問ではありましたが、返信いただきありがとうございます。
v-forを使用し配列postsの値を投稿一覧ページに値を反映することが出来ました。
ありがとうございます。
私の言葉足らずで大変恐縮ですが、掲示板のように配列postsの値とテンプレート(post.vue(投稿フォーム))のセットでレンダリングできる方法を御教示いただければと思っていました。
もし宜しければその方法を御教示頂けますと幸いです。

[yhg]

同じ画面に投稿フォームと投稿一覧を表示したいということでしたら、両方を一緒に表示するコンポーネントを新たに作って、作ったコンポーネントをvue-router経由で表示すれば良いと思います。

<template>
<div>
<posts-list />
<post-form />
</div>
</template>

[kaksji]

返信ありがとうございます。
申し訳ありません。
度々の言葉足らずで、、
投稿フォームと投稿一覧は別画面です。
下記ファイルです。
・post.vue(投稿フォーム）
・post.list(投稿一覧)
投稿フォームで入力したデータを投稿一覧で掲示板のように表示したいのですが、先ほどいただいたコードだけですと、データのみ反映されます。

下記実際の挙動になります。
https://gyazo.com/0d67fe2f356c7fdc19211f7065f74e41
最後に映った投稿カードを掲示板のようにデータと共に繰り返し表示したいです。
uiはフェイスブックの方がイメージ近いです。

下記頂いたソースコードを元に編集した投稿一覧フォーム

postlist.vue（投稿一覧）

<template>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-img
src="https://cdn.pixabay.com/photo/2015/11/19/21/14/phone-1052023__480.jpg"
aspect-ratio="2.75"
></v-img>

<v-card-title primary-title>
<div>
<h3 class="headline mb-0">今日学んだこと</h3>
<div>

<div v-for="(post, index) in posts":key="index" >
{{ post }}
</div>
</div>
</div>
</v-card-title>

<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">delete</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>

</template>

<script>
import { mapState } from 'vuex'

export default {
computed: {
...mapState(['posts'])
}
}
</script>

[yhg]

私が提示したコードは配列の内容を表示するだけの簡略化した例なのでそのまま流用はできません。
今回の場合ですと、<v-flex>にv-forを書く必要がありますね。
差し出がましいですが、きちんと意味を理解して書けるよう、Vue公式ガイドを読んでみてはいかがでしょうか。