質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 602

kaksji

score 17

前提・実現したいこと

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

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

エラーメッセージ 

該当のソースコード

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/ツールのバージョンなど)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 16:54

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

    キャンセル

  • 2019/05/13 18:24

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

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

    キャンセル

  • 2019/05/13 20:26 編集

    返信ありがとうございます。
    申し訳ありません。
    度々の言葉足らずで、、
    投稿フォームと投稿一覧は別画面です。
    下記ファイルです。
    ・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>

    キャンセル

  • 2019/05/13 22:26

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る