Checkbox does not allow dynamic values

[philBrown]

Say I have an array of objects and want to use checkboxes to create a filtered set of attributes, for example

{
things: [{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'} ... ],
selectedThings: []
}

Because you've used v-model in the checkbox component, we cannot bind the value attribute like this.

<div v-for="thing in things" :key="thing.id">
  <md-checkbox v-model="selectedThings" :value="thing.id"/>
  <span>{{thing.name}}</span>
</div>

Vue triggers the error...

• :value conflicts with v-model on the same element because the latter already expands to a value binding internally

All you would have to do is use a different prop name than value.

[philBrown]

Ah, after looking through the source code, I see I can use :model instead of v-model to get around this limitation.

Might be good to add that to the documentation :)

[Samuell1]

This is weird because i tested it and i doesnt get any error.

[philBrown]

I'm using Vue 2.5.5 if that helps. The error was reported by vue-template-compiler

[Samuell1]

@philBrown update vue and vue-template-compiler to 2.5.9 and should work

[philBrown]

Yep, that sorted it :)

[philBrown]

For reference ~ vuejs/vue#7084

[Samuell1]

Yeah we had this issue few weeks ago #1167