How to dynamically add a new property to array of object inside v-for - Vue.js

Question

I want to add on extra property(showMore) dynamically to array of object inside v-for. is it possible to do it inside v-for like:

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>

here i am adding one more property (showMore) to array of object(student) by clicking on Show more. is it possible inside v-for? if not then how to achieve this(with best practice)?

Answer 1

Sure, but it will not be reactive though. If you want that, you need to use:

vm.$set( target, key, value )

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