问题描述
我正在研究并尝试更改示例代码,以便从基本选择输入子组件中触发@change事件。
base 组件如下
<template>
<div class="form-group">
<label>{{ label }}</label>
<select
class="form-control"
:class="{
'is-valid': validator && !validator.$error && validator.$dirty,'is-invalid': validator && validator.$error
}"
@change="$emit('input',$event.target.value)"
>
<option
v-for="opt in options"
:key="opt.value"
:value="opt.value"
:selected="value === opt.value"
>
{{ opt.label || 'No label' }}
</option>
</select>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,required: true
},options: {
type: Array,required: true,validator (opts) {
return !opts.find(opt => typeof opt !== 'object')
}
},value: {
type: String,validator: {
type: Object,required: false,validator ($v) {
return $v.hasOwnProperty('$model')
}
}
}
}
</script>
和 child 组件具有引用
<BaseSelect
label="What do you love most about Vue?"
:options="loveOptions"
v-model="$v.form.love"
v-on:change="changeItem($event)"
/>
...
methods: {
changeItem (event) {
console.log('onChange')
console.log(event.target.value)
},
该方法似乎没有被使用,当我使用 select 输入而不是 BaseSelect 时,它按预期工作,因此我怀疑是否缺少某些内容在这里的设置中非常正确。
解决方法
您正在发出一个input
事件,但正在监听一个change
事件:
@change="$emit('input',$event.target.value)"
...
v-on:change="changeItem($event)"