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 puted property as well and still didn't work...

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 puted property as well and still didn't work...

• javascript
• vue.js
• vuejs2

• I cannot get your idea very well. DOM should be updated automatically. Would you please provide a fiddle? – 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 Commented Aug 17, 2017 at 13:31
• 1 so basically <td @click="keyword.edited = !keyword.edited"> ? – phoet Commented Aug 17, 2017 at 14:23

1 Answer 1

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