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

I looking for same thing.Have you got any solutions?

Savan S
– Savan S

2019-05-02 12:58:23 +00:00
Commented May 2, 2019 at 12:58 — Savan S
– Savan S, Commented May 2, 2019 at 12:58
@SavanS Please check my answer

Mukund Kumar
– Mukund Kumar

2019-05-02 13:51:59 +00:00
Commented May 2, 2019 at 13:51 — Mukund Kumar
– Mukund Kumar, Commented May 2, 2019 at 13:51

tony19 · Accepted Answer · 2022-07-15 00:45:06Z

8

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

edited Jul 15, 2022 at 0:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 1, 2017 at 10:15

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mukund Kumar · Accepted Answer · 2019-05-02 13:51:30Z

6

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

answered May 2, 2019 at 13:51

Mukund Kumar

23.5k20 gold badges64 silver badges85 bronze badges

2 Comments

Eje Over a year ago

Correct. This works for me. Also, according to Vue's documentation, Vue.set must be used to add new properties to reactive objects. Read more here.

keroles Monsef Over a year ago

yes it works for me . Vue.set(object, 'key','value');

wakajawaka · Accepted Answer · 2019-05-02 14:23:25Z

-2

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

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

answered May 2, 2019 at 14:23

wakajawaka

1637 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related