Vue3使用@vueform/multiselect 2.1.6时选中选项后如何清空输入框

实现步骤 #

1. 给multiselect组件添加ref标识，用于获取组件实例：

<multiselect
   v-model="value"
   :options="getSkillList"
   :searchable="true"
   @select="addSkill"
   @search-change="updates"
   ref="multiselectRef"
></multiselect>

2. 在选中触发的addSkill方法中，操作组件实例的search属性清空输入内容，分两种语法场景：

选项式API场景 #

methods: {
  addSkill(selectedOption) {
    // 原有业务逻辑
    // ...

    // 清空搜索输入框内容
    this.$refs.multiselectRef.search = ''

    // 若需要同时清空已选中的选项，额外添加下面这行
    // this.value = null
  }
}

组合式API场景 #

import { ref } from 'vue'

// 原有变量声明
const value = ref(null)
const getSkillList = ref([])
// 声明multiselect的ref对象
const multiselectRef = ref(null)

const addSkill = (selectedOption) => {
  // 原有业务逻辑
  // ...

  // 清空搜索输入框内容
  multiselectRef.value.search = ''

  // 若需要同时清空已选中的选项，额外添加下面这行
  // value.value = null
}

说明 #

v2.1.6版本的Vue3适配版multiselect直接暴露了search实例属性和搜索输入框内容双向绑定，无需手动操作DOM，修改该属性即可实时清空输入内容。

内容的提问来源于stack exchange，提问作者Alexandre K.