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...

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