如何在v-for中为对象数组动态添加新属性-Vue.js

Question

我想showMore动态地在v-for中的对象数组上添加额外的property（）。是否可以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>

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

Answer 1

可以，但是不会反应。如果需要，您需要使用：

vm.$set( target, key, value )

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

Answer 2

用 Vue.set(obj, property, value);

详细示例：

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="showMore(student)">Show more +</div> 
  <!-- it was possible in angularjs. is it possible in vuejs ?-->
</div>

showMore(student) {
  Vue.set(student, 'showMore', true);
}

注意：不要忘记导入Vue