Vue.js 如何在设置v型时触发select的更改事件？

我有Dropdown.vue和Sprint.vue使用Dropdown.vue

下拉列表.vue

code

<template>
  <div>
    <select
      v-model="selected"
      @input="$emit('input', $event.target.value)"
      @change="emitChangeEvent"
    >
      <option
        v-for="(option, idx) in options"
        :key="`option-${idx}`"
        :value="option.value"
      >
        {{ option.text }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'Dropdown',
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      required: false,
    },
  },
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(newValue) {},
    },
  },
  methods: {
    emitChangeEvent() {
      this.$emit('change', this.selected);
    },
  },
};
</script>

当我们选择一个选项时，触发了一个事件。但当我点击按钮通过编程设置selected选项时，没有触发select事件

---

我遗漏了什么？

据我所知，Dropdown.vue组件中存在两个主要问题

1） 您正在将元素的v型模型绑定到计算属性

selected

，并在

emitChangeEvent

中发出

selected

2） 而且所选的

计算属性没有设置器，因此值更改时不会发生任何事情

要检查这是否是唯一的问题，快速解决方法是将
emitChangeEvent
更改为：

emitChangeEvent（事件）{
这是.emit（'change'，event.target.value）；
}

直接从事件发出值将跳过计算属性定义中的任何问题

<template>
  <div>
    <Dropdown
      v-model="sprint"
      :options="sprints"
      @change="sprintChanged"
    />
    {{ sprint }}

    <button @click="change">
      Change Sprint
    </button>
  </div>
</template>
<script lang="ts">
import {
  Component, Prop, Vue, Emit,
} from 'vue-property-decorator';
import Dropdown from '@/components/Dropdown.vue';

@Component({
  components: {
    Dropdown,
  },
})
export default class Sprint extends Vue {
  private sprint = {};

  private sprints = [
    { text: 'Sprint A', value: 'A' },
    { text: 'Sprint B', value: 'B' },
    { text: 'Sprint C', value: 'C' },
  ];

  change() {
    this.sprint = 'B';
  }

  sprintChanged(value: any) {
    console.log(`value=${value}, sprint=${this.sprint}`);
  }
}
</script>