Vue.js onchange 使用 Base Select 组件

Question

我正在研究并尝试修改一段示例代码，以便从基础 select 输入子组件触发 @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,
      required: true
    },
    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[=26 时，它按预期工作=]，所以我怀疑这里的设置中缺少或不太正确。

Answer 1

您正在发出 input 事件，但正在侦听 change 事件：

@change="$emit('input', $event.target.value)"

...

v-on:change="changeItem($event)"

Vue.js onchange 使用 Base Select 组件

Vue.js onchange using Base Select component

select

onchange

vue.js

vue-component

vuejs2