Блог

Я работаю и пытаюсь изменить пример фрагмента кода, чтобы события @change запускались из дочернего компонента ввода базового выбора.

Базовый компонент следующий

 <template>
  <div class="form-group">
    <label>{{ label }}</label>
    <select
      class="form-control"
      :class="{
        'is-valid': validator amp;amp; !validator.$error amp;amp; validator.$dirty,
        'is-invalid': validator amp;amp; 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>
  

и дочерний компонент имеет ссылку

 <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)"