是否可以通过单击Vue select元素来检测是否触发了更改事件？

Question

我有一个<select> -element，它具有绑定到它的数据属性，使用Vue中的v-model。

有时候我想动态改变这个值。我还有一个事件监听器附加在这个元素上，这个元素在change事件中被触发。见代码例如：

<template> 
    <div class="mySelector"> 
     <select id="testSelect" v-model="mySelectModel" 
       @change="onChange($event)"> 
      <template v-for="(item, index) in someList"> 
       <option :class="['btn', 'btn-default', 'removing-button']" :value="index">{{item.name}}</option> 
      </template> 
     </select> 
    </div> 
</template> 

<script> 

    export default { 
    data() { 
     return { 
     mySelectModel: null 
     } 
    }, 
    props: { 
    }, 
    methods: { 
     customChange: function() { 
     this.mySelectModel = ... // some value we from somewhere else that is set dynamically on some condiftion 
     }, 
     onChange: function (event) { 
     if (!event) return; 
     // DO SOMETHING THAT WE ONLY WANT TO DO ON A REAL CLICK 
     } 
    }, 
    } 
</script> 

我的问题是，当我改变数据值动态地mySelectModel，像在customChange -method，所述change事件也被称为，触发方法onChange。我只想用这种方法来做东西，如果它真的是由真正的点击触发的，而不是动态改变的。

我无法找到一种方法来区分这些情况下的change-事件是由点击触发的，还是因为某种其他原因而被更改时。有什么建议么？

Answer 1

请参阅vue-js-selected-doesnt-triggering-change-event-select-option，当v-model被JS更新时（仅当用户更改所选值时），select似乎不会触发@change。

一个指令可以添加功能

Vue.directive('binding-change', { 
    update: function (el, binding, vnode) { 
    const model = vnode.data.directives.find(d => d.name === 'model') 
    if (model) { 
     binding.value(model.value) 
    } 
    } 
}) 

使用像

<select id="testSelect" 
    v-binding-change="onChange" 
    v-model="mySelectModel" 
    @change="onChange($event)"> 

不能确定参数的onChange - 我给它一个考验。

Answer 2

到this suggested solution类似，你可以做一个设定的计算，你v-model在你的widget：

1. 的get函数返回
2. 的set功能也无论你想在窗口小部件的改变的数据项除了设置数据项外

其他代码可以直接更改数据项并且不会执行set代码编辑。如果用作`v型model`变化的特性

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    values: ['one','two','three'], 
 
    selectedItem: 'two' 
 
    }, 
 
    computed: { 
 
    wrappedSelectedItem: { 
 
     get() { return this.selectedItem; }, 
 
     set(value) { 
 
     console.log("Changed in widget"); 
 
     this.selectedItem = value; 
 
     } 
 
    } 
 
    }, 
 
    methods: { 
 
    changeToThree() { 
 
     console.log("Stealth change!"); 
 
     this.selectedItem = 'three'; 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <select v-model="wrappedSelectedItem"> 
 
    <option v-for="value in values" :value="value">{{value}}</option> 
 
    </select> 
 
    <button @click="changeToThree">Set to three</button> 
 
</div>