Vue 无法更改嵌套 v-for 中的属性

Question

我得到一个对象数组，并在其中添加属性clicked=false，这样我以后可以使用 vue bind 和该属性的值添加或删除一个类

然后我将这个对象数组转换为对象结构，这样我就可以在循环的渲染中按类型渲染项目。

我在每个列表项上使用点击方法来更改clicked 属性，但它永远不会改变。

我该怎么做？

对象有这个结构

grouped:{
  typeA: [
   {
    clicked: false,
    text: "a1",
    type: "typeA"
   }, 
   {
    clicked: false,
    text: "a2",
    type: "typeA"
   }
  ],
  typeB: [
   {
    clicked: false,
    text: "b1",
    type: "typeB"
   }
  ]
}

然后按我做的类型渲染

  <div v-for="(group, type) in grouped" :key="type">
    <b>{{type}}</b>
    <div  v-for="(item, index) in group" :key="index" @click="eventItemClick(item)" >
      {{item.text}}   {{item.clicked}}
    </div>
  </div> 

eventItemClick 方法所做的只是

      eventItemClick(item){    
        item.clicked = !item.clicked;
      },
           

我创建了一个简单的js fiddle example 来演示。只需记住单击group 按钮即可对数组进行分组并呈现列表

谢谢

Answer 1

您遇到了reactivity caveat，因为您尝试使用渲染时不存在的数据属性。

设置这些属性时使用Vue.set：

this.todos.forEach(e => { 
   this.$set(e, 'clicked', false);  // `Vue.set` in a module
});