如何刷新Vue-Multiselect下拉选项？Laravel+Inertia+Vue场景问题

核心问题分析 #

1. users不是响应式变量：用普通数组let users = []存储选项，Vue无法追踪它的变化，接口返回数据后视图不会自动更新。
2. selectedCustomer赋值错误：它是ref声明的响应式变量，直接用selectedCustomer = selected会覆盖ref对象，破坏响应式，导致后续判断selectedCustomer.id失效。
3. 模板冗余属性：multiselect的:value和v-model重复绑定，没必要保留，可能引发逻辑冲突。

修复后的代码 #

脚本部分

let selectedUser = ref(props.filters.selectedUser);
let selectedCustomer = ref('');
// 改为响应式数组
let users = ref([]);

let customerSelected = (selected={}) => {
    // ref变量赋值必须通过.value
    selectedCustomer.value = selected;
    asyncFind();
};

let asyncFind = (find='') => {
    var url= window.location.href;
    url = url.split("/logs");
    // 访问ref变量的实际值要加.value
    if(selectedCustomer.value.id != undefined)
    {
        window.axios.get(url[0]+'/custusers', { params: { search: find, customer: selectedCustomer.value.id } })
                    .then(response => {
                        // 响应式数组赋值同样需要.value
                        users.value = response.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
    }
};

模板部分

<multiselect v-model="selectedUser" 
             :options="users"
             label="text" 
             track-by="text" 
             placeholder="Type to search" 
             open-direction="bottom"    
             @search-change="asyncFind">
</multiselect>

额外验证点 #

• 后端返回的数据格式没问题：你的响应示例里每个对象都包含text字段，完全匹配label="text"和track-by="text"的配置。
• 可以在asyncFind的then回调里加console.log(users.value)，确认数据确实被正确赋值到响应式数组中。

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