CODEWITHSUNDEEP
vue.jsvuejs2
Mukund Kumar
Mukund Kumar

Reputation: 23181

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

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)?

Upvotes: 8

Views: 10158

Answers (3)

Stephan-v
Stephan-v

Reputation: 20289

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

vm.$set( target, key, value )

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

Upvotes: 8

wakajawaka
wakajawaka

Reputation: 163

If you are targeting modern browsers, you can always use the summary tag:

<details>
  <summary>More Info</summary>
  <p>hello!</p>
</details>

Upvotes: -2

Mukund Kumar
Mukund Kumar

Reputation: 23181

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

Detailed example: 

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);
}

Note: Don't forgot to import Vue

Upvotes: 6

Related Questions