没有 v-model 的 Vue.JS 复选框 [英] Vue.JS checkbox without v-model

问题描述

尝试在不使用 v-model 的情况下创建复选框

<input type="checkbox" :value="value" @change="$emit('input', $event.target.checked)"/>

复选框将选中和取消选中，并且输入事件发送到父级，但值不会改变.我的父组件如下所示:

解决方案

对于复选框，使用 :checked 而不是 :value.请参阅下面的演示.

Vue.component('custom-component', {模板:'#custom'，道具:['价值']})新的 Vue({el: '#app',数据: {some_boolean_value: 真}})

<script src="https://unpkg.com/vue"></script><div id="应用程序"><p>some_boolean_value: {{ some_boolean_value }}</p><custom-component v-model="some_boolean_value"></custom-component>

<模板 id="自定义"><div style="border: 2px 红色虚线;"><input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)"/>

</template>

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>

这篇关于没有 v-model 的 Vue.JS 复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！