[英]Vue.Js, binding a value to a checkbox in a component
I'm making a component which is a wrapper around a checkbox (I've done similar with inputs of type 'text' and 'number') but I cannot get my passed in value to bind correctly.我正在制作一个组件,它是一个复选框的包装器(我对“文本”和“数字”类型的输入做了类似的处理),但我无法正确绑定传入的值。
My component is:我的组件是:
<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>
I've imported it globally;我已经在全球范围内导入了它; and am invoking it in another view by doing:
并通过以下方式在另一个视图中调用它:
<check-edit name="ShowInCalendar" v-model="model.ShowInCalendar" label="Show in calendar?" :errors="this.errors.ShowInCalendar"></check-edit>
My model is in data and the property ShowInCalendar is a boolean and in my test case is true.我的模型在数据中,属性 ShowInCalendar 是布尔值,在我的测试用例中为真。 So when I view the page the box is checked.
因此,当我查看该页面时,该框被选中。 Using the Vue tools in firefox I can see the model.ShowInCalendar is true, and the box is checked.
在 Firefox 中使用 Vue 工具我可以看到 model.ShowInCalendar 为 true,并且该框被选中。 However, when I click it the box remains checked and the value of ShowInCalendar changes to 'on', then changes thereafter do not change the value of ShowInCalendar.
但是,当我单击它时,该框仍处于选中状态,并且 ShowInCalendar 的值更改为“on”,此后更改不会更改 ShowInCalendar 的值。
I found this example here: https://jsfiddle.net/robertkern/oovb8ym7/ and have tried to implement a local data property for it but the result is not working.我在这里找到了这个例子: https ://jsfiddle.net/robertkern/oovb8ym7/ 并尝试为其实现本地数据属性,但结果不起作用。
The crux of what I'm trying to do is have the initial checkstate of the checkbox be that of ShowInCalendar (or whatever property is bound via v-model on the component) and then have that property be update (to be true or false) when the checkbox is checked.我想要做的关键是让复选框的初始检查状态是 ShowInCalendar (或通过组件上的 v-model 绑定的任何属性),然后更新该属性(为真或假)当复选框被选中时。
Can anyone offer me any advice please?任何人都可以给我任何建议吗?
Thank you.谢谢你。
You should not $emit event.target.value
, it's the value of the checkbox, it's not a Boolean value.你不应该
$emit event.target.value
,它是复选框的值,它不是布尔值。 If you want to detect the checkbox is update(to be true or false) or not, You should $emit event.target.checked
just like fstep said.如果你想检测复选框是否更新(是真还是假),你应该
$emit event.target.checked
就像 fstep 说的那样。
If v-on is the only listener that will be used it might be easier to use v-model
as in the checkbox example from the Vue input docs .如果 v-on 是唯一将使用的侦听器,则使用
v-model
可能更容易,如Vue 输入文档中的复选框示例中所示。
However you can use listeners based on Binding-Native-Events-to-Components docs但是,您可以使用基于Binding-Native-Events-to-Components文档的侦听器
<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() {
var vm = this;
// `Object.assign` merges objects together to form a new object
return Object.assign(
{},
// We add all the listeners from the parent
this.$listeners,
// Then we can add custom listeners or override the
// behavior of some listeners.
{
// This ensures that the component works with v-model
input: function(event) {
vm.$emit('input', event.target.checked);
}
}
);
},
hasErrors() {
return this.errors.length > 0;
}
}
};
</script>
Don't change props.不要改变道具。 Your component, having a
v-model
, should be emitting input events on change .您的组件具有
v-model
,应该在 change 上发出输入事件。 The parent will handle the actual changing of the value.父级将处理值的实际更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.