CODEWITHSUNDEEP
vue.js
Sylvain Attoumani
Sylvain Attoumani

Reputation: 1194

v-if doesn't dynamically change value

I'm working in a Vue.js and I have : 

 <span v-if="!change[product.id]['name']" v-on:click="show(product.id, 'name')" style="cursor:pointer">
    {{{ product.name }}}
</span>

<span v-if="change[product.id]['name']">
    okays
</span>

I initialise my 'change' with that :

this.$set('products', response.data.products)
self.productsLoading=false
let array = []
array['name'] = false
for (let i = 0; i < response.data.products.length; i++) {
  self.change[response.data.products[i].id] = array;
}
console.log(self.change)

So my console.log show me the array I want to have so so far so good.

And my show function : 

show(id, field){
    let array = this.change
    array[id][field] = true
    this.$set('change',array)
    console.log(this.change)
},

Once more, my console.log is still good when i click on the product.name but I still see the product.name instead of "okays"

Data definition :

data() {
        return {
            products: [],
            change: []
        }
}

Upvotes: 0

Views: 963

Answers (1)

euvl
euvl

Reputation: 4786

This line might be a problem:

let array = []
array['name'] = false

Use {} instead of [] if you need to use array variable as dictionary (object).

Upvotes: 1

Related Questions