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.
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;
})