Vue.js中如何通过代码触发下拉框的change事件？

核心问题说明 #

代码修改v-model绑定的Result.Value时，不会触发下拉框的原生change事件，因此v-on:change绑定的changeSelection方法不会自动执行，需要手动调用或通过监听属性触发。

方法一：修改值后直接手动调用方法 #

在设置Result.Value的代码后，直接调用changeSelection，并根据方法需求构造模拟的$event对象（因为代码修改没有真实DOM事件）：

// 示例方法中修改下拉框值并触发事件
updateDropdownValue() {
  this.Result.Value = 10;
  // 构造模拟event对象，包含方法需要的属性（比如target.value）
  const mockEvent = {
    target: {
      value: this.Result.Value
    }
  };
  // 调用changeSelection，传入模拟event和固定参数
  this.changeSelection(mockEvent, 'somevalue');
}

如果你的changeSelection方法不需要使用$event的具体属性，也可以直接传null或者空对象：

this.changeSelection(null, 'somevalue');

方法二：监听Result.Value的变化（自动触发） #

如果希望**只要Result.Value变化（无论是用户手动选择还是代码修改）**都触发changeSelection，可以用Vue的watch属性监听值的变更：

// 在Vue组件的watch选项中添加监听
watch: {
  'Result.Value'(newVal) {
    const mockEvent = {
      target: { value: newVal }
    };
    this.changeSelection(mockEvent, 'somevalue');
  }
}

这样后续不管是用户操作下拉框，还是代码修改Result.Value = 10，都会自动触发changeSelection方法，实现第二个下拉框的数据绑定。

内容的提问来源于stack exchange，提问作者user21618874