I recently started using vue js and I decided to incorporate the vue-multiselect plugin. I successfully integrated the plugin in vue js with inertia js and laravel on the backend. However, I encountered an issue where the dropdown content does not update when receiving a response from the server side during a search.
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);
});
}
};
Here is the HTML code:
<multiselect v-model="selectedUser"
:value="selectedUser"
:options="users"
label="text"
track-by="text"
placeholder="Type to search"
open-direction="bottom"
@search-change="asyncFind">
</multiselect>
The server response data looks like this:
[
{
"id":10490,
"text":"kashif"
},
{
"id":10491,
"text":"kashif"
},
...
]
I have attempted to find solutions in various forums but haven't been able to find a resolution yet.