是否可以通過單擊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>