使用Base Select组件的Vue.js onchange

如何解决使用Base Select组件的Vue.js onchange

我正在研究并尝试更改示例代码，以便从基本选择输入子组件中触发@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)"