I have a Vue component called Select and I am defining it as a template. The data and props for the component are already set up.
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;
},
},
});The function onAppSelected is defined in the template using v-on:change, and it is triggered when an option is manually selected from the dropdown.
However, the onAppSelected function does not get triggered if the value of the select is set programmatically using the setValue method.
The setValue method is called from an external button.
The jQuery library's .trigger("change") method also does not help in this case.
Here is the full code on jsFiddle
A link to the complete implementation on jsFiddle has been provided for testing purposes. Please check the output in the console.
Can anyone offer assistance with this issue? Thank you in advance for taking the time to read about my problem.