javascript - Vue.Js,将值绑定到组件中的复选框
问题描述
我正在制作一个组件,它是一个复选框的包装器(我对“文本”和“数字”类型的输入做了类似的处理),但我无法正确绑定传入的值。
我的组件是:
<template>
<div class="field">
<label :for="name" class="label">
{{ label }}
</label>
<div class="control">
<input :id="name" :name="name" type="checkbox" class="control" :checked="value" v-on="listeners" />
</div>
<p v-show="this.hasErrors" class="help has-text-danger">
<ul>
<li v-for="error in errors" :key="error">{{ error }}</li>
</ul>
</p>
</div>
</template>
<script>
export default {
name: 'check-edit',
props: {
value: {
type: Boolean,
default: false
},
label: {
type: String,
default: ''
},
name: {
type: String,
default: ''
},
errors: {
type: Array,
default: () => []
}
},
mounted () {
},
computed: {
listeners () {
return {
// Pass all component listeners directly to input
...this.$listeners,
// Override input listener to work with v-model
input: event => this.$emit('input', event.target.value)
}
},
hasErrors () {
return this.errors.length > 0
}
},
}
</script>
我已经在全球范围内导入了它;并通过以下方式在另一个视图中调用它:
<check-edit name="ShowInCalendar" v-model="model.ShowInCalendar" label="Show in calendar?" :errors="this.errors.ShowInCalendar"></check-edit>
我的模型在数据中,属性 ShowInCalendar 是布尔值,在我的测试用例中为真。因此,当我查看该页面时,该框被选中。在 Firefox 中使用 Vue 工具我可以看到 model.ShowInCalendar 为 true,并且该框被选中。但是,当我单击它时,该框仍处于选中状态,并且 ShowInCalendar 的值更改为“on”,此后更改不会更改 ShowInCalendar 的值。
我在这里找到了这个例子:https ://jsfiddle.net/robertkern/oovb8ym7/并尝试为其实现本地数据属性,但结果不起作用。
我想要做的关键是让复选框的初始检查状态是 ShowInCalendar (或通过组件上的 v-model 绑定的任何属性),然后更新该属性(为真或假)当复选框被选中时。
任何人都可以给我任何建议吗?
谢谢你。
解决方案
你不应该$emit event.target.value
,它是复选框的值,它不是布尔值。如果你想检测复选框是否更新(是真还是假),你应该$emit event.target.checked
像 fstep 说的那样。
推荐阅读
- autohotkey - 对三重组合键使用 GetKeyState 不起作用
- sql - 如何在sequelize中将外键引用到另一个外键?
- node.js - docker/nodejs/mongodb 部署:MongooseError [MongooseServerSelectionError]:连接超时
- django - Django RestFramework 弹性搜索:时间线 API
- javascript - 如何用鼠标选择范围单元格?
- node.js - 无法弄清楚如何返回 socket.join 真实性
- python - 如何创建另一列,其中包含基于熊猫数据框中同一分类列的两个不同值的操作?
- cypress - 赛普拉斯 - 第一次测试随机失败,出现“无效或意外令牌”
- android - 在 Android 数据库中出现此错误:android.database.sqlite.SQLiteException:靠近“+”:语法错误(代码 1)
- javascript - 除了选项文本之外,我如何告诉 Select2 从数据属性中搜索(从 select2 标记中的多个属性中搜索)