英文:
how to refresh Vue-Multiselect dropdown options?
问题
我是新手使用 Vue.js。我正在使用 vue-multiselect 插件。我在 Vue.js 中与 Inertia.js 和 Laravel 后端集成了该插件。在从服务器端获取搜索响应时，下拉内容未更新。
let selectedUser = ref(props.filters.selectedUser);
let selectedCustomer = ref('');
let users = [];
let customerSelected = (selected={}) => { selectedCustomer = selected; asyncFind(); };
let asyncFind = (find='') => {
var url = window.location.href;
url = url.split("/logs");
if (selectedCustomer.id != undefined) {
window.axios.get(url[0] + '/custusers', { params: { search: find, customer: selectedCustomer.id } })
.then(response => {
users = response.data;
})
.catch(error => {
console.log(error);
});
}
};
和 HTML 部分
<multiselect v-model="selectedUser"
:value="selectedUser"
:options="users"
label="text"
track-by="text"
placeholder="Type to search"
open-direction="bottom"
@search-change="asyncFind">
</multiselect>
服务器响应如下
[
{
"id": 10490,
"text": "kashif"
},
{
"id": 10491,
"text": "kashif"
},
{
"id": 10492,
"text": "kashif"
},
{
"id": 10493,
"text": "kashif"
},
{
"id": 10494,
"text": "kashif"
},
{
"id": 10495,
"text": "kashif"
},
{
"id": 10496,
"text": "kashif"
},
{
"id": 10497,
"text": "kashif"
},
{
"id": 10498,
"text": "kashif"
},
{
"id": 10499,
"text": "kashif"
}
]
我查看了建议中的答案，但没有得到任何线索。
英文:
I am new to vue js. I am using vue-multiselect plugin. I integrated the plugin in vue js with inertia js and laravel on the backend. When getting a response from the server side on search, the dropdown content does not update.
let selectedUser = ref(props.filters.selectedUser);
let selectedCustomer = ref('');
let users = [];
let customerSelected = (selected={}) => { selectedCustomer = selected;asyncFind();};
let asyncFind = (find='') => {
var url= window.location.href;
url = url.split("/logs");
if(selectedCustomer.id !=undefined)
{
window.axios.get(url[0]+'/custusers', { params: { search: find, customer:selectedCustomer.id } })
.then(response => {
users = response.data;
})
.catch(error => {
console.log(error);
});
}
};
And HTML here
<multiselect v-model="selectedUser"
:value="selectedUser"
:options="users"
label="text"
track-by="text"
placeholder="Type to search"
open-direction="bottom"
@search-change="asyncFind">
</multiselect>
server response as following
[
{
"id":10490,
"text":"kashif"
},
{
"id":10491,
"text":"kashif"
},
{
"id":10492,
"text":"kashif"
},
{
"id":10493,
"text":"kashif"
},
{
"id":10494,
"text":"kashif"
},
{
"id":10495,
"text":"kashif"
},
{
"id":10496,
"text":"kashif"
},
{
"id":10497,
"text":"kashif"
},
{
"id":10498,
"text":"kashif"
},
{
"id":10499,
"text":"kashif"
}
]
I checked the answers in the suggestion, but did not get any clue.
答案1
得分: 1
users 变量也需要具有响应性：
// ...
let users = ref([]);
并更新它：
// ...
window.axios.get(url[0]+'/custusers', { params: { search: find, customer: selectedCustomer.id } })
.then(response => {
users.value = response.data;
})
英文:
users var needs to be reactive too:
// ...
let users = ref([]);
And update it:
// ...
window.axios.get(url[0]+'/custusers', { params: { search: find, customer:selectedCustomer.id } })
.then(response => {
users.value = response.data;
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论