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事件，触发方法{{1 }}。我只想在该方法中做一些事情，如果它真的是由真正的点击触发，而不是在它被动态改变的时候。

当找不到onChange - 事件由点击触发或刚刚因某些其他原因而被更改时，我找不到区分这些情况的方法。有什么建议吗？

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制作一个可设置的计算表：

get函数只返回数据项
除了设置数据项之外，set函数还可以执行要在窗口小部件中进行更改的任何内容

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

＆＃13;

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';
    }
  }
});

＆＃13;

<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>

＆＃13;

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

2 个答案: