vue.js - 如何动态地将新属性添加到 v-for 中的对象数组 - Vue.js

Question

我想向 v-for 中的对象数组动态添加额外的属性 (showMore)。是否可以在 v-for 中执行此操作，例如:

this.students = [
{
 name: 'anonymous',
 class: 'Sixth',
 otherInfo: "..."
},
{
 name: 'anonymous2',
 class: 'Sixth',
 otherInfo: "..."
}
]
<div v-for="student in students">
  <div>{{student.name}}</div>
  <div>{{student.class}}</div>
  <div @click="student.showMore = true">Show more +</div> 
  <!-- it was possible in angularjs. is it possible in vuejs ?-->
</div>

在这里，我通过单击“显示更多”向对象数组 (student) 添加了一个属性 (showMore)。 v-for里面有可能吗？如果不是那么如何实现这一点(最佳实践)？

Answer 1

当然可以，但它不会 react 。如果你想要，你需要使用:

vm.$set( target, key, value )

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats