sagalbot/vue-select 选中元素变动事件(:on-change 踩坑)

场景

• 需要根据选中元素为依赖获取一个计算属性(array), 此时computed不能满足

分析

官方文档的介绍

/**
* An optional callback function that is called each time the selected
* value(s) change. When integrating with Vuex, use this callback to trigger
* an action, rather than using :value.sync to retreive the selected value.
* @type {Function}
* @param {Object || String} val
*/
onChange: {
type: Function,
default: function (val) {
this.$emit(‘input’, val)
}
},
但是 @change是不起作用的

方案 && 遇到的坑

正确做法

:on-change=”changeProduct”
这个方法接受一个参数(当前选中的元素)

这里有个坑

:on-change=function 触发事件 ;但是如果使用这个方法的话 v-select上的v-model将不在起作用 && computed自然也不会触发

源码

  <v-select :options="list_product_type" placeholder="请选择产品" :on-change="changeProduct" v-model="product_type" label="product_name"></v-select>