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.

tony19 · Accepted Answer · 2022-07-16 01:59:47Z

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"]

edited Jul 16, 2022 at 1:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 10, 2020 at 17:55

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

stepbysteptomathpro Over a year ago

Thank you for your reply. I made the changes you suggested, but somehow I still get an undefined value for CommentRecID. Do you know what the cause might be?

Terry Over a year ago

Looks like your parent element is also receiving it as a prop. Go up the dependency chain until you find the source of CommentRecId, and rename all instances of it in JS to camelCase, and all template references to kebab-case. In general though, you should never use PascalCase for your variables unless it's a class.

Terry Over a year ago

@PoliticsStudent No problem, happy to help!

Shizzen83 · Accepted Answer · 2020-04-10 17:56:52Z

1

You need to use VueJS binding

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

props: ['commentRecId']

answered Apr 10, 2020 at 17:56

Shizzen83

3,5593 gold badges14 silver badges35 bronze badges

Collectives™ on Stack Overflow

Vue.js Passing variable from Parent to child component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related