javascript - 如果从外部方法设置值，则不会调用 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>当用户提交对元素值的更改时，元素。与输入事件不同，更改事件不一定会针对元素值的每次更改而触发。

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

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