Trying to create a checkbox without using v-model
<input type="checkbox" :value="value" @change="$emit('input', $event.target.checked)" />
The checkbox will check and uncheck, and the input event is sent to the parent, but the value doesn't change. My parent component looks like this:
<custom-component v-model="some_boolean_value"></custom-component>
For checkboxes, use :checked instead of :value. See demo below.
Vue.component('custom-component', {
template: '#custom',
props: ['value']
})
new Vue({
el: '#app',
data: {
some_boolean_value: true
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>some_boolean_value: {{ some_boolean_value }}</p>
<custom-component v-model="some_boolean_value"></custom-component>
</div>
<template id="custom">
<div style="border: 2px dashed red;">
<input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)" />
</div>
</template>
checked property (which is a boolean) with the checked attribute, no? The latter can only be a string, but its value doesn't matter at all: if the attribute is declared, even if empty (eg checked="") the checkbox will have its checked property set to true. At any rate, this difference is only noticeable in vanilla HTML/JS, because when vue sees the :checked it always treats it as a prop anyway