Vue Multiselect搜索后显示选项未实时更新，如何解决？

我在用带自定义搜索的Vue Multiselect组件时，输入搜索文本后，availableColumns已经更新，但用户看到的可用选项得选中某一项后才会变化。怎么实现搜索时实时刷新Multiselect的显示选项？

组件模板代码 #

<v-row 
    v-for="(filter, idx) in campaign.filters.selected_filters"
    align="center"
    :key="idx"
    style="margin-top: 8px"
>  
    <v-col cols="4" style="padding-top:25px"> <!-- 第一个选择器 -->
        <vue-multiselect
            v-model="filter.column"
            :options="temp_selected_filters[idx].availableColumns"
            @input="filterSelectionChanged(filter.column, idx)"
            :multiple="false"
            :close-on-select="true"
            :clear-on-select="false"
            :preserve-search="true"
            placeholder="字段"
            :show-labels="false"
            :internal-search="false"
            @search-change="(query) => searchTextChange(idx, query)"
            style="width:100%">
            
            <!-- 自定义选项显示内容 -->
            <template slot="option" slot-scope="{ option }">
                {{ getColumnObject(option).name }}
            </template>
            
            <!-- 自定义已选选项显示内容 -->
            <template slot="singleLabel" slot-scope="{ option }">
                {{ getColumnObject(option).name }}
            </template>
            
        </vue-multiselect>
    <!-- ... 其他内容 -->

搜索处理函数 #

searchTextChange(index, query) {
    this.temp_selected_filters[index].availableColumns = [];
    this.availableColumns.forEach(item => {
        const name = this.getColumnObject(item).name;
        if (name.toLowerCase().includes(query)) {
            this.temp_selected_filters[index].availableColumns.push(item);
        }
    });
    this.temp_selected_filters[index].searchText = query;
},

选择变更处理函数 #

filterSelectionChanged(column, index) {
    if (this.temp_selected_filters[index]) {
        const prev_selected_column = this.temp_selected_filters[index].column;
        // 以下情况清空输入值：取消已选筛选、新增筛选未选字段但输入值、切换字段后类型不一致
        if ((!column && this.available_filters[prev_selected_column].type != 'string')
            || (column &&
                ((!prev_selected_column && this.available_filters[column].type != 'string')
                    || (prev_selected_column && this.available_filters[column].type != this.available_filters[prev_selected_column].type)))
        ) {
            this.campaign.filters.selected_filters[index].value = '';
        }
    }
    this.temp_selected_filters[index].column = column;
    // 切换字段后，如果原运算符不在新字段支持列表中，重置运算符
    if (!this.getOperators(column).includes(this.campaign.filters.selected_filters[index].operator)) {
        this.campaign.filters.selected_filters[index].operator = '';
    }
},

搜索后temp_selected_filters示例 #

"0": {
        "column": null,
        "searchText": "email",
        "availableColumns": [
            "email",
            "manager_email",
            "personal_email"
        ]
    },
"1": {
        "column": "address",
        "searchText": "addr",
        "availableColumns": [
            "address",
            "work_address"
        ]
    },

解决方案 #

问题根源是Vue响应式更新未被正确触发：直接修改temp_selected_filters[index].availableColumns时，Vue可能无法检测到数组的变更（尤其是当temp_selected_filters的对象属性未提前声明时）。

具体修复步骤： #

1. 用$set强制触发响应式更新
   修改searchTextChange函数，通过Vue的$set方法更新属性，确保响应式系统感知到变化：

searchTextChange(index, query) {
    // 直接生成筛选后的新数组
    const filteredColumns = this.availableColumns.filter(item => {
        const name = this.getColumnObject(item).name;
        return name.toLowerCase().includes(query);
    });
    // 用$set更新属性，触发视图刷新
    this.$set(this.temp_selected_filters[index], 'availableColumns', filteredColumns);
    this.$set(this.temp_selected_filters[index], 'searchText', query);
},

2. 确保初始数据的响应式完整性
   如果temp_selected_filters是动态添加的对象，初始化时就要包含availableColumns属性，避免后续新增属性无法被响应式追踪：

// 示例：新增筛选器的逻辑
addNewFilter() {
    this.temp_selected_filters.push({
        column: null,
        searchText: '',
        availableColumns: [...this.availableColumns] // 初始化时赋值完整数组
    });
}

3. 优化v-for的key值
   避免用索引idx作为v-for的key（数组顺序变化时会导致组件复用异常），如果筛选器有唯一标识（比如id），改用唯一标识作为key：

<v-row 
    v-for="(filter, idx) in campaign.filters.selected_filters"
    align="center"
    :key="filter.id" <!-- 替换为唯一标识 -->
    style="margin-top: 8px"
>

原理说明 #

Vue的响应式系统通过Object.defineProperty追踪对象属性，数组只有调用push/splice等变异方法才会触发更新。直接替换数组或用$set修改对象属性，能强制触发响应式更新，让Multiselect实时感知到options的变化。

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