如何在Vue Multiselect中选择选项后清除搜索输入（保留已选）

你需要在选择选项时手动清空组件的搜索输入值，同时保留preserve-search来维持输入内容直到选择发生。具体实现步骤如下：

1. 为组件添加ref引用并绑定选择事件 #

给<vue-multiselect>添加ref属性方便访问内部状态，同时绑定@select事件触发清空操作：

<vue-multiselect
        ref="multiselect"
        v-model="selected[generic]"
        :options="available[generic]"
        :multiple="true"
        :close-on-select="false"
        :clear-on-select="false"
        :show-labels="false"
        :preserve-search="true"
        :placeholder="description"
        label="name"
        :loading="targetsIsLoading"
        @search-change="inputEntered"
        @select="clearSearchInput"
        track-by="uuid">
    <template slot="selection" slot-scope="{ values, search, isOpen }">
        <span class="multiselect__single" v-if="available[generic].length && !isOpen">{{values.length}} options selected</span>
    </template>
</vue-multiselect>

2. 实现清空搜索框的方法 #

在组件的methods中添加clearSearchInput函数，通过ref直接修改组件内部的搜索值：

methods: {
    clearSearchInput() {
        this.$refs.multiselect.searchQuery = '';
    },
    // 你的inputEntered方法...
}

逻辑说明 #

• preserve-search="true"确保搜索框在未选择选项时，始终保留用户输入的内容
• @select事件在每次选择下拉选项时触发，此时调用清空方法重置搜索框
• clear-on-select="false"保持已选内容不被清除，和原有需求完全兼容

内容的提问来源于stack exchange，提问作者BigDataFiles