Search code examples
javascriptlaravelvue.jsinertiajsvue-multiselect

how to refresh Vue-Multiselect dropdown options?


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.


Solution

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