是否可以检测到单击 Vue 选择元素是否触发了更改事件？

Question

我有一个 <select> 元素，它有一个使用 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-方法中一样，change 事件也被调用，触发方法onChange。如果它真的是由真正的点击触发的，我只想在那个方法中做一些事情，而不是当它被动态更改时。

当change-event 由单击触发或由于其他原因而更改时，我无法找到区分这些情况的方法。有什么建议吗？

Answer 1

见vue-js-selected-doesnt-triggering-change-event-select-option，似乎在JS更新v-model时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：

1. get 函数只返回数据项
2. 除了设置数据项之外，set 函数还可以执行您希望在小部件中进行更改的任何操作

其他代码可以直接改变数据项，不会执行计算的set代码。

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>