Can I modify a button when iterating?

[wpq]

I have the following buttons:

   <q-btn
      color="blue"
      class="q-ma-sm"
      size="sm"
      v-for="tag in allTags"
      @click="tag.set=!tag.set"
    >
      {{tag}}
    </q-btn>

allTags is an Array with elements such as {tag: "hello", set: true}.

As expected, I get a row of buttons but clicking on them does not change the set property.

Is it possible to modify the value of a property while iterating this way?

[dobbel]

@wpq

Your problem is that Vue(2) has reactivity need to knows when altering the values inside objects and arrays.

See:
https://vuejs.org/v2/guide/reactivity.html

So instead of:

@click="tag.set=!tag.set"

you have to do something like this:

// Vue.set(object, propertyName, value)
Vue.set(tag, 'set', !tag.set)

Btw not sure if Vue is availible inside the vue template, so you might need to use a clickHandler function.

[metalsadman]

@wpq you could just be missing a :key there.

[suleiman_as]

@wpq You could setup a method and pass the tag or index onclick and set it from the method.
Edit: and don’t forget the :key