Vue v-show update after changing data with method

Question

I'm iterating over this array of object's and in each object there's a property - keyword.edited which iniitalized with the value - false the all loop looks like this:

<tr v-for="(keyword, index) in keywords"> <td>{{keyword.tag_name}}</td> <td @click="edit_keyword(index)"> <el-input-number v-show="keyword.edited" :step="step" size="small" v-model="keyword.max_bid"></el-input-number> </td> </tr>

now since initalized with false none of the keywords will show. problem is when i click edit_keyword(index) the value of the relevant keyword changes to true:

edit_keyword(index){ this.keywords[index].edited = !this.keywords[index].edited return this.keywords[index].edited }

but the DOM won't update, or in other words the relevant keyword won't show as i expected. any idea how can i achive this one? tried to implement same idea with computed property as well and still didn't work...

I cannot get your idea very well. DOM should be updated automatically. Would you please provide a fiddle? — choasia
– choasia, Commented Aug 17, 2017 at 13:21
try to log your index, and do some error control maybe the issue is there — Filipe Costa
– Filipe Costa, Commented Aug 17, 2017 at 13:31
so basically <td @click="keyword.edited = !keyword.edited"> ? — phoet
– phoet, Commented Aug 17, 2017 at 14:23

tony19 · Accepted Answer · 2022-07-15 20:58:39Z

5

The property you are changing is not reactive, so vue is not watching it changes. If you update property of the object you need to tell Vue with $set method:

edit_keyword(index) { this.$set(this.keyswords[index], 'edited', !this.keywords[index].edited) }

edited Jul 15, 2022 at 20:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 17, 2017 at 15:08

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Axelle Over a year ago

The updated syntax is this.$set(propName, index, newValue); so for example this.$set(this.show, index, !this.show[index]);

Collectives™ on Stack Overflow

Vue v-show update after changing data with method

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related