How to evaluate Vue.js component props in the data property?

Question

I have 2 components: Post and Comments.

Inside Post component, there is Comments component that has 3 props: postId, num

Answer 1

It looks like the comments prop does not have a value at the time of the component's creation (which is the only time allComments will be set).

You can either:

1. Defer the creation of the component until the comments prop is ready by using v-if like this:

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

2. Watch for changes to the comments prop and set allComments to the new value (in addition to initializing allComments in the data function):

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