如何在 VueJS 2.x 中将对象数组传递给子组件答案

【问题标题】：How to pass an array of objects to child component in VueJS 2.x如何在 VueJS 2.x 中将对象数组传递给子组件
【发布时间】：2019-07-11 18:34:34
【问题描述】：

我正在尝试发送一个包含数组的数组，该数组又包含从另一个组件到一个组件的对象，但该数组的内容在子组件中似乎是空的。

我尝试使用 JSON.Stringify() 将数据作为字符串发送，也可以作为数组发送

我的父组件：

    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;
    }
}

我的父组件的模板：

/*

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

我的子组件：

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

};

父组件是这样创建的（在我们主组件的一个方法中）：

 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);

如果我尝试在子组件中执行 console.log(this)，我可以看到 lineItems 属性中存在正确的数组数据..但我似乎无法访问它。

我刚刚开始使用 VueJS，所以我还没有完全掌握这里的数据流，尽管我已经尝试阅读文档以及 stackoverflow 上的类似案例，但无济于事。

预期结果：使用 this.lineItems 应该是我从父级发送的值的填充数组。

实际结果：this.lineItems 是一个空数组

编辑：问题似乎与我创建父组件的方式有关：

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);

将其更改为常规的自定义 vue 组件修复了问题

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

代码 - https://codesandbox.io/s/znl2yy478p

您可以通过函数 JSON.stringify() 打印您的对象 - 在这种情况下，所有函数都将被省略，只打印值。

【讨论】：

【解决方案2】：

您的代码中的一切看起来都不错。

问题是属性未正确传递，并且正在使用默认属性。

更新您实例化顶级组件的方式。

【讨论】：

在模板中直接访问javascript变量不会报错吗？
这是我的父组件的数据： data: function(){ return { myLineItems: [] } }，值被推送到父组件的“created”方法内的这个数组。这可能是问题所在，是否在“created”方法设法将值推送到“myLineItems”之前添加了模板？
好的，这很好，并显示了空数组。现在，您如何添加项目？并非所有方法都是反应式的。
另外，您是否使用承诺获得物品？
在子组件的 created() 内部，我调用了一个方法“setMyLinesData()” 在这个方法内部，我正在创建一个数组（原始帖子中显示的数据），我将其设置为所以：this.myLineItems = myCreatedArray;我不太确定你如何使用“承诺”..我至少在这里没有这样做（不幸的是不熟悉这个）

【解决方案3】：

尝试如下 =>

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

【讨论】：

this.lineItems 仍然只返回不包含任何值的 "[ob: Observer]" :(
您检查过 myLineItems 中的数据吗？？
是的，我可以看到它包含数据（有关它包含的内容，请参阅我的原始帖子）。并且可以从父组件很好地访问它。同样在子组件中，如果我执行：console.log(this)，我可以看到子实例的属性 lineItems 实际上包含正确的数据。但如果我尝试：console.log(this.lineItems)，它什么也不输出
你能做一个小提琴吗？