Vue.js Passing variable from Parent to child component

Question

Parent component: ShowComment

Child component: EditComment

I'm trying to pass the value of this.CommentRecID to the child component.

I wrote this in the template of ShowComment :

<EditComment CommentRecID="this.CommentRecID" v-if="showEdit"></EditComment>

and

this.showEdit = true;

but the value of this.CommentRecID is shown as undefined in the child component:

I thought that writing props: ["CommentRecID"], in the child component would have already been enough to pass the data, but it wasn't (because it's related to jQuery I think).

What is wrong with the way I try to pass the values?

Here's the parent component .

Here's the child component .

Answer 1

You shouldn't need to use this in VueJS directives. Also, instead of using a static attribute, you need to use v-bind :

<EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>

Also, there's an issue with the casing: for VueJS, in template props should be kebab-cased, while in the component JS logic you should use camelCase props . Remember to update your child component's prop declaration so that it can read the new prop correctly:

 props: ["commentRecId"]

Answer 2

You need to use VueJS binding

<EditComment :comment-rec-id="CommentRecID" v-if="showEdit"></EditComment>

props: ['commentRecId']