如果从外部方法设置值，则不会调用 Vue 组件的（选择）on-change 函数

Question

我使用 Select 作为 Vue 组件并将其定义为模板。我正在定义组件数据和道具。

var MyComponent = Vue.component('my-component',{

  template: "<select v-on:change=\"onAppSelected\"	\n"+ 
  "v-model:value=\"appId\">			        \n"+
  "<option v-for=\"appChoice in appChoices\" 		\n"+
  "v-bind:value=\"appChoice.id\">{{appChoice.name}}	\n"+
  "</option>										\n"+
  "</select>",
 
  methods: {
  	onAppSelected:function(event){
    	console.log("On Change Called:", this.item.serial)
    	console.log("Event Target:",event.target.value)      
    },
  	setValue: function(selValue) {
    	this.appId = selValue;      
    },
  }, 
});

如果手动从下拉列表中选择选项，则会调用模板中使用 v-on:change 定义的函数 onAppSelected。

但是，如果从方法 setValue 设置 Select 的值，则不会触发该功能 onAppSelected。

setValue 方法是从外部按钮调用的。

jquery lib .trigger("change") 在这种情况下也没有帮助。

jsFiddle Full Code

添加了 js fiddle 中完整实现的链接以供测试。 检查控制台中的输出。

任何人都可以帮助我解决这个问题。 提前感谢您阅读我的问题。

Answer 1

来自change | MDN，

当用户提交对元素值的更改时，<input>、<select> 和 <textarea> 元素的 change 触发。与输入事件不同，更改事件不一定会在每次更改元素值时触发。

这意味着只有当值被用户“更改”时才会触发更改事件。如果用户选择相同的值，它也不会触发。

您可以使用“watch”来检测更改：JSFiddle