CODEWITHSUNDEEP
vue.jsvuejs2
Sjobi
Sjobi

Reputation: 7

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

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

Upvotes: 0

Views: 6758

Answers (3)

Steven Spungin
Steven Spungin

Reputation: 29169

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.

Upvotes: 0

Pratik Patel
Pratik Patel

Reputation: 6978

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.

Upvotes: 1

Riddhi
Riddhi

Reputation: 2244

Try as below =>

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

Upvotes: 0

Related Questions