Question

编辑2

我认为问题是我如何引用父组件中的数组。评论中提供了一个小提琴。

我有一个应用程序，我们希望能够将项目添加到menu_header。我试过推到阵列的底部，但Vuejs似乎没有检测到它。

我已阅读此部分https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats，我正在努力完成这项工作，但我不确定这是否可行。

类似的东西：

var obj = { name: "my name" }
menu_header.items.push(obj);

我是否需要使用this.$set语法？我真的需要通过splice添加到数组的中间。

编辑1

所以这是一个递归的组件（即menu_header可以有很多menu_headers）。我尝试在menu_item中添加一个简单的按钮，以添加到父组件，如下所示：

methods:{
  addItem: function(){
   var items = this.$parent.$data.menuHeader.menu_items;
   var obj = { header: "my header", detail: "this detail"}
    console.log("11 items length: " + items.length);
   items.splice(1,0,obj);
   console.log("22 items length: " + items.length);
  },

项目数量的计数增加，但视图不会重新渲染。这个组件嵌套3层深（一个Menu组件有许多MenuHeader组件，它们可以有许多MenuItem组件，并且还有许多MenuHeader组件）。我很确定它是反应性/阵列问题 - 但不确定确切的问题。

Answer 1

这里真正的问题是you should use a key带有一个列表，以便Vue属性在所有情况下呈现它，当你在一个组件上进行迭代时，必须使用一个键。小提琴中的代码正确地将元素添加到数组中，Vue正在检测更改，由于它的更新策略，它只是无法正确呈现列表。使用密钥修复了。

为此，我在模板中修改了这些行。

<div v-for="menu_header in menu.menu_headers" :key="menu_header.name">

和

<div v-for="(menu_item, idx) in menuHeader.menu_items" :key="menu_item.header">

这些的最佳键是列表中对象的一些独特属性。以上使用name和header，但我希望通过实际代码可以提供更好的密钥。

最好养成在Vue中渲染列表时始终添加密钥的习惯。

可以动态地将对象添加到数组并让Vuejs检测它

编辑2

编辑1

1 个答案: