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

Posted 2023-02-16

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

【英文标题】：Vue component's (select) on-change function not called if value set from external method

【发布时间】：2019-05-25 16:55:34

【问题描述】：

我使用 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 中完整实现的链接以供测试。 检查控制台中的输出。

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

【参考方案1】：

来自change | MDN，

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

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

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

【讨论】：

感谢@Tang 的帮助，Vue watch 对解决这个需求很有帮助。