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

Posted 2023-02-16

【中文标题】Vue 无法更改嵌套 v-for 中的属性

【英文标题】：Vue cannot change attribute in nested v-for

【发布时间】：2021-03-23 02:12:00

【问题描述】：

我得到一个对象数组，并在其中添加属性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 按钮即可对数组进行分组并呈现列表

谢谢

【参考方案1】：

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

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

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

【讨论】：

您好，感谢您的回答。我得到ReferenceError: Vue is not defined 我在这里错过了什么？谢谢

嗨，Vue 应该在你的小提琴中定义，因为你使用new Vue。但我编辑给你看set的组件语法

感谢您的修复。我现在没有错误，但仍然无法正常工作。也许我应该在 eventItemClick 中使用某种 get ？谢谢

这是你的小提琴与我的答案集成：jsfiddle.net/sh0ber/6nq73w51（请注意它适用于此编辑和原始版本）所以我不确定你指的是什么