Vue Select — Loading Options and Loops

Photo by Charlotte Coneybeer on Unsplash

To make dropdowns easier, we can use the Vue Select plugin to add the dropdown.

It can do much more than the select element.

In this article, we’ll look at how to use the vue-select package to make more complex dropdowns.

Loading Options with Ajax

We can load options with Ajax.

For example, we can write:

<template>
  <v-select @search="fetchOptions" :options="options"/>
</template>
<script>
export default {
  data() {
    return {
      allOptions: ["apple", "orange", "grape"],
      options: []
    };
  },
  methods: {
    fetchOptions(search, loading) {
      setTimeout(() => {
        this.options = this.allOptions.filter(a =>
          a.toLowerCase().includes(search.toLowerCase())
        );
      }, 1000);
    }
  }
};
</script>

to add the fetchOptions method and set it as the listener of the search event.

The search parameter has our search query.

loading lets us toggle the loading state.

Then we set the options prop to the options state.

Disabling Filtering

We can disable client-side filtering when we’re loading the options from the…