Checkbox on list

[jersobh]

Please, I coudn't understand how to use the checkbox within a list. I have this list:

<tr class="file" draggable="true" @dragstart="eventer" v-for="item in files" :key="item.name">

                    <td data-th="Título">{{item.name}}</td>
                    <td data-th="Álbum">{{item.type}}</td>
                    <td data-th="Artista">{{item.size}}</td>
                  </tr>

If I check one checkbox, all are checked. How do I simple select a single item?

[tkcn568]

Is v-model set to the same value for all of your checkboxes?

[jersobh]

Yep. If they're inside a v-for, would be strange to have a different model for it, since it's dynamic. I know that it works this way, but would be great to have anoter type of checkbox that works like a regular checkbox, maybe with a "value" option, then you could set a model (array) and each "value" would be placed on that array. Like

`

` (i've placed _ on each tag, because it was rendering as html :+1: ) Or maybe even put an option "boolean", like `

` so every selected option could come as true/false

[tkcn568]

What's happening is that since all are pointing to the same v-model in Vue, checking/unchecking one will affect them all, because they all are looking at the same variable.

I have a related issue with q-checkbox right now, and I'm in the middle of trying a workaround, but ultimately, I may make a feature request for it, because I agree with you on that.

[tkcn568]

@rstoenescu checkbox.md right now doesn't have any documentation specifying that v-model should be Boolean. I can update the docs at least for now to clarify this, since it's not in the docs right now.

[rstoenescu]

Hi all,

Correct me if I misunderstood your scenario, but you can do:

myVar = [ { text: ..., model: false }, { text: ..., model: true }, .... ]

then in your template:

<ul>
  <li v-for="(item, index) in myVar">
    <q-checkbox v-model="item.model" />
    {{item.text}}
  </li>
</ul>

This way you can point every checkbox to a different model. You don't have to bind all checkboxes to the same model.

Please reopen if you think I missed something.

[Phactory]

Now (0.14.2) I needt to forceUpdate q-checkbox after each change/click to see state change. Without that no checking/unchecking result is visible. Guessing that its not right..

`

{{ field }}:

                    <div v-for="(checked, value) in values">
                        <q-checkbox @change="$forceUpdate()" v-model="filters[field][value]" :label="value">
                        </q-checkbox>
                    </div>
                </div>`

filters json is like so: { field1: {a : true, b: false }, field2: {a: true, b: false} }