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是不起作用的
@input 可以捕捉change 事件, 且v-model还是在的

方案 && 遇到的坑

正确做法

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