Question

我有道具“猫”

props: ['cat1'],

Ant这段代码

<select class="form-control" @change="set_category">
   <option value="" disabled>Please select category</option>

   <option v-for="category in categories"
          :value="category" 
          :selected="cat1 == category.url">{{ category.name}}
   </option>
</select>

所以这个代码是在页面加载时调用的，问题是，加载页面选项后更改但是它没有触发@change事件，因为它实际上我无法实际跟踪在页面上选择了哪个选项加载。我尝试了很多版本的v-model ant等，但它看到我只是坚持它..

Answer 1

这是一个将根据需要发出变更事件的指令

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 class="form-control" v-binding-change="set_category" v-model="cat1">
   <option value="" disabled>Please select category</option>
   <option v-for="(category, index) in categories"
      :key="index"
      :value="category" 
   </option>
</select>

methods: {
  set_category (newValue) {
  }
}

我还没有尝试使用prop（只是一个局部变量），但我可以说它在后台更改绑定变量时会发出更改事件（与@change不同）。

Answer 2

Richard Matsen's answer很棒。但是，如果您只想跟踪页面加载的值，为什么不在created（或mounted）上调用它。

created() {
  this.set_category();
}

这是jsfiddle：

vue.js：selected不会触发@change事件select / option

2 个答案: