Vue.js передаёт реквизиты данных

У меня есть 2 компонента: Post и Comments.

В компоненте Post Post есть компонент комментариев, который имеет 3 реквизита: postId, numCom (количество комментариев) и comments (массив).

Я получаю комментарии, и я передаю массив с реквизитами, и теперь я хочу получить массив в компоненте "Комментарии" и добавить его в данные, чтобы затем добавлять/удалять комментарии и т.д.

Вот мой код в Comments.vue:

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

Но это не работает. В инструментах Vue для разработчиков я вижу, что поддержка comments заполнена комментариями, но массив allComments пуст.

Что я должен делать?

Ответ 1

Похоже, что в момент создания компонента не поддерживается значение comments, которое не имеет значения (это единственный момент, allComments будут установлены allComments).

Вы также можете:

Отложите создание компонента до тех пор, пока поддержка comments будет готова с помощью v-if:

<comments v-if="comments" :comments="comments"></comments>

Следите за изменениями в comments prop и установите allComments на новое значение (в дополнение к инициализации allComments в функции данных):

watch: {
  comments(value) {
    this.allComments = value;
  }
}