Vue.js variable undefined after being passed to another component

Question

I have a variable commentRecId in component A, that I want to pass to use it in component B.

I included this in the template of component A:

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

I set showEdit to true in the methods of component A:

methods: {
  loadComments: function() {
    this.showEdit = true;
    console.log("this.ShowEdit in ShowComment: " + this.showEdit);
    console.log("commentRecID in ShowComment: " + this.commentRecId);

Up until now this works perfectly fine and commentRecID does have a value.

The problem is that the variable commentRecId is shown as undefined in the other component B and after hours of trial and error I still don't understand why.

In component B, I have this in the props:

export default {
    props: ["commentRecId"],

and used this to reference the variable:

var statID = this.commentRecId;
console.log("Edit Comment this.commentRecId: " + statID);

Can someone tell me what I'm doing wrong?

(Component A) (Component B)

Boussadjra Brahim · Accepted Answer · 2020-04-10 21:45:51Z

1

Try to set statID as a computed property use it in the mounted hook :

computed :{
  statID (){
   return this.commentRecId;
  }

}

and reference it in mounted hook by prefixing it with this like console.log("Edit Comment this.commentRecId: " + this.statID);

edited Apr 10, 2020 at 21:45

answered Apr 10, 2020 at 21:15

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

7 Comments

stepbysteptomathpro Over a year ago

How do I have to reference statID in mounted?

Boussadjra Brahim Over a year ago

You could reference it like console.log("Edit Comment this.commentRecId: " + this.statID);

stepbysteptomathpro Over a year ago

Hmm, I get a ReferenceError: statID is not defined at a.mounted

Boussadjra Brahim Over a year ago

did you add this before it like this.statID

stepbysteptomathpro Over a year ago

I experimented a bit, now it just says that it's undefined. This is what it looks like after your suggestion: pastebin.com/PJrZJ4N6

|

Collectives™ on Stack Overflow

Vue.js variable undefined after being passed to another component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related