CODEWITHSUNDEEP
vue.js
Dave
Dave

Reputation: 2765

Vue.JS checkbox without v-model

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>

Upvotes: 3

Views: 8592

Answers (1)

acdcjunior
acdcjunior

Reputation: 135762

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>

Upvotes: 12

Related Questions