我正在做一个组件,它是一个复选框的包装器(我做过类似于'text‘和’number‘类型的输入),但是我不能让我的传入值正确绑定。
我的组件是:
<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是一个布尔值,在我的测试用例中是真的。因此,当我查看页面时,该框处于选中状态。使用火狐中的Vue tools,我可以看到model.ShowInCalendar是真的,并且复选框被选中。但是,当我单击它时,该框仍处于选中状态,并且ShowInCalendar的值更改为'on',此后的更改不会更改ShowInCalendar的值。
我在这里找到了这个示例:https://jsfiddle.net/robertkern/oovb8ym7/,并尝试为它实现一个本地数据属性,但结果不起作用。
我尝试做的关键是让checkbox的初始检查状态是ShowInCalendar的初始检查状态(或通过组件上的v-model绑定的任何属性),然后在复选框被选中时更新该属性(为真或假)。
有没有人能给我提点建议?
谢谢。
发布于 2019-03-01 12:06:40
你不应该$emit event.target.value
,它是复选框的值,不是布尔值。如果你想检测复选框是否更新(真或假),你应该像fstep所说的那样$emit event.target.checked
。
发布于 2019-03-01 10:25:04
如果v-on是唯一要使用的侦听器,则使用v-model
可能更容易,如Vue input 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>
发布于 2019-03-01 08:58:12
不要换道具。具有v-model
的组件应该是emitting input events on change。父级将处理该值的实际更改。
https://stackoverflow.com/questions/54935823
复制相似问题