Vue.js - checkbox with same value on different pages be checked

[xibman]

Hi

I found a small bug on checkbox:
if you have multiple page with different question with checkbox with the same value, answer checked on page 1 are checked on page 2.
See the exemple: https://jsfiddle.net/z11fe07p/778/

[dmitry-kurmanov]

@xibman , hello! Thanks for your report. May be it is because of this problem:
https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544
http://stackoverflow.com/questions/42248888/vuejs-v-model-multiple-checkbox-and-computed-property

We couldn't understand how to use multiple checkboxes with computed property. So we are using watch for our checkboxes implementation, it might be wrong:
https://github.com/surveyjs/surveyjs/blob/feature/ng/src/vue/checkbox.vue

we will think how to fix it.

[xibman]

I think it could be interesting to ask the question on vue gitter channel: https://gitter.im/vuejs/vue

[dmitry-kurmanov]

@xibman, done, thank you!

[xibman]

@dmitrykurmanov you can use this: https://vuejs.org/v2/guide/computed.html#Computed-Setter

et get the element id to store te correct value

[dmitry-kurmanov]

@xibman yes, we did it. But we have a problem (as I've written above). You can see it in the fiddle. Could you check it please?

[xibman]

@dmitrykurmanov Hi, i think you could use a custom method for the checkbox: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events,

The problem comes from shared model between all checkbox.
So if the have the same value they were checked on each page.

[xibman]

Hi all,

I think with the last version of vue you can solve the problem easily:

Component v-model Customization

Previously, v-model on a custom component defaults to use value as the prop and input as the event. This places some restrictions when authoring custom input components that resembles checkboxes or radio inputs. In 2.2 you can customize the props/event pair using the new model component option:

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String
  },
  // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>

The above will be equivalent to:

<my-checkbox
  :checked="foo"
  @change="(val) => { foo = val }"
  value="some value">
</my-checkbox>

[dmitry-kurmanov]

@xibman we fixed it in 0.12.3 version, thanks for your help!