Vue: v-model on custom component with radio/checkbox not working

[terion-name]

Vue2 added support for v-model over custom components. It works like a charm on text inputs, but it seems not to work with radio/checkboxes. I was searching for a long time for solution, found that on radios v-model relies on click event, tried all events possible, but no luck.

Vue.js version

2.1.9

Reproduction Link

http://codepen.io/terion/pen/bgQZdX

Steps to reproduce

• Wrap radio/checkbox in a custom component
• emit all events up
• add v-model to parent component

What is Expected?

• v-model is updated

What is actually happening?

• v-model is not updated

[znck]

This code snippet has bug. You are binding & emitting same value from each instance of form-check.

A quick fix is to add extra prop checkValue then bind checked to value === checkValue and emit checkValue instead of value.

[terion-name]

@znck I don't understand. I've updated pen, but nothing changed and I think that I didn't understand you correct. Can you please point more concrete or fork the pin? Also, can be this topic covered in docs? It's not obvious how to make it work (if possible)

[terion-name]

@znck also, refering to this docs section:

In original variant (without checkValue) I've replaced v-model="color" on :value="color" @change="color = arguments[0]" and everything woks as expected. So it is not clear, why v-model, being just syntax sugar over this, don't work. Also while this works with radio (where a single value is selected), the same will not work with checkboxes (where values should be collected by input name in array)

[terion-name]

@znck ah, ok, I've understood what was you talking about. changed props — still nothing changed

[znck]

I have a working implementation of custom checkbox component.

See it in action: https://vue-issue.surge.sh

Check source: https://github.com/znck/bootstrap-for-vue/blob/master/src/components/CustomBox.vue

[terion-name]

@znck thank you!