How to pass an array of objects to child component in VueJS 2.x

Question

I am trying to send an array containing arrays which in turn contains objects to one component from another, but the content from the array seems to be empty in the child component.

I have tried sending the data as a String using JSON.Stringify() and also as an array

My parent component:

    data: function(){

 return{
       myLineItems : []
    }
},
created(){
 this.CreateLineItems();
},
methods:{


 CreateLineItems(){
      let myArrayData = [[{"title":"Title1","value":2768.88}],[{"title":"Title2","value":9}],[{"title":"Title3","value":53.61},{"title":"Title4","value":888.77},{"title":"Title5","value":1206.11},{"title":"Title6","value":162.5}]] 
    this.myLineItems = myArrayData;
    }
}

My parent component's template:

/*

 template: `<div><InvoiceChart v-bind:lineItems="myLineItems"></InvoiceChart></div>`

My child component:

const ChildComponent= {
    props: {
        lineItems: {
            type: Array
        }
    },
    mounted() {   
        console.log(this.lineItems);
    }

};

The parent component is created as so (inside a method of our main component):

 var ComponentClass = Vue.extend(InvoiceDetails);
                var instance = new ComponentClass({
                    propsData: { invoiceid: invoiceId }
                });
                instance.$mount();

                var elem = this.$refs['details-' + invoiceId];  
                elem[0].innerHTML = "";
                elem[0].appendChild(instance.$el);

If I try to do a console.log(this) inside the childcomponent, I can see the correct array data exist on the lineItems property..but i can't seem to access it.

I have just started using VueJS so I haven't quite gotten a hang of the dataflow here yet, though I've tried reading the documentation as well as similar cases here on stackoverflow to no avail.

Expected result: using this.lineItems should be a populated array of my values sent from the parent.

Actual results: this.lineItems is an empty Array

Edit: The problem seemed to be related to how I created my parent component:

var ComponentClass = Vue.extend(InvoiceDetails);
                var instance = new ComponentClass({
                    propsData: { invoiceid: invoiceId }
                });
                instance.$mount();

                var elem = this.$refs['details-' + invoiceId];  
                elem[0].innerHTML = "";
                elem[0].appendChild(instance.$el);

Changing this to a regular custom vue component fixed the issue

Pratik Patel · Accepted Answer · 2019-02-18 12:12:23Z

1

Code - https://codesandbox.io/s/znl2yy478p

You can print your object through function JSON.stringify() - in this case all functions will be omitted and only values will be printed.

answered Feb 18, 2019 at 12:12

Pratik Patel

7,0381 gold badge20 silver badges44 bronze badges

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

Comments

Steven Spungin · Accepted Answer · 2019-02-20 14:31:40Z

0

Everything looks good in your code.

The issue is the property is not correctly getting passed down, and the default property is being used.

Update the way you instantiate the top level component.

edited Feb 20, 2019 at 14:31

answered Feb 18, 2019 at 12:02

Steven Spungin

29.6k7 gold badges97 silver badges85 bronze badges

19 Comments

Riddhi Over a year ago

Isn't an error thrown when javascript variables are accessed directly within template?

Sjobi Over a year ago

Here is data of my parent component: data: function(){ return { myLineItems: [] } }, The values are pushed to this array inside the "created" method of the parent component. Could this be the issue, is the template being added before the "created" method manages to push the values to "myLineItems" ?

Steven Spungin Over a year ago

OK thats good, and shows the empty array. Now, how are you adding items? Not all methods are reactive.

Steven Spungin Over a year ago

Also, are you getting items using a promise?

Sjobi Over a year ago

Inside created() of the child component, I am calling a method "setMyLinesData()" Inside this method I am creating an array (data shown above in the original post), and i set this like so: this.myLineItems = myCreatedArray; I am not quite sure how you use "promise"..I haven't done so here atleast (not familiar with this unfortunately )

|

Riddhi · Accepted Answer · 2019-02-18 11:59:30Z

0

Try as below =>

    const ChildComponent= {
    props: {
        lineItems: {
            type: Array
        }
    },
    mounted() {   
        console.log(this.lineItems);
    }
  };

edited Feb 18, 2019 at 11:59

answered Feb 18, 2019 at 11:36

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

4 Comments

Sjobi Over a year ago

this.lineItems still just returns "[ob: Observer]" containing no values :(

Riddhi Over a year ago

Have you cheked for data in myLineItems??

Sjobi Over a year ago

Yes, I can see that it contains data (see my original post for what it contains). And can access it fine from the parent component. Also in the child component if I do a : console.log(this), I can see that the property lineItems of the child instance, in fact contains the correct data. But if I try: console.log(this.lineItems), it outputs nothing

Riddhi Over a year ago

Can u create a fiddle?

Collectives™ on Stack Overflow

How to pass an array of objects to child component in VueJS 2.x

3 Answers 3

Comments

19 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

19 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related