web-dev-qa-db-ja.com

データプロパティでVue.jsコンポーネントの小道具を評価する方法は？

PostとCommentsの2つのコンポーネントがあります。

Postコンポーネントの内部には、postId、numCom（コメントの数）、およびcomments（配列）の3つのプロパティを持つCommentsコンポーネントがあります。

コメントを取得し、小道具で配列を渡します。次に、コメントコンポーネントで配列を取得してデータに追加し、コメントなどを追加/削除できるようにします。

ここに私のコードがComments.vue：

props: ['id', 'numCom', 'comments'],
data: function() {
  return {
     newMessage: "",
     loading: false,
     allComments: this.comments,
     num: this.numCom,
   }
},

しかし、これは機能しません。 Vue開発者ツールでは、comments propにコメントが入力されていますが、allComments配列は空です。

私は何をすべきか？

javascriptvue.jsvuejs2vue-component
15
Miha Vidakovic

comments propには、コンポーネントの作成時に値がないように見えます（allCommentsが設定される唯一の時間です）。

次のいずれかを実行できます。

  1. 次のようにv-ifを使用して、commentsプロパティが準備できるまでコンポーネントの作成を延期します。
<comments v-if="comments" :comments="comments"></comments>
  1. comments propへの変更を監視し、allCommentsを新しい値に設定します（データ関数でallCommentsを初期化することに加えて）。
watch: {
  comments(value) {
    this.allComments = value;
  }
}
18
Decade Moon