Adding Dropdowns to a Vue App with the Vue Select Package

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 get started with the package.

Getting Started

We can add the package by installing it by running:

npm install vue-select

or

yarn add vue-select

Then we can use it by registering the component in main.js

import Vue from "vue";
import App from "./App.vue";
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";

Vue.component("v-select", vSelect);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

And then in our component file, we add:

<template>
  <div id="app">
    <v-select :options="['Canada', 'United States']"></v-select>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The options prop lets us add the options for the dropdown.

We can also populate the select options with an array:

<template>
  <div id="app">
    <v-select :options="options"></v-select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      options: [
        { label: "Canada", code: "ca" },
        { label: "United States", code: "us" }
      ]
    };
  }
};
</script>

Then label value will be displayed.

We can set the property name with the strings to display.

For example, we can write:

<template>
  <div id="app">
    <v-select label="countryName" :options="options"></v-select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      options: [
        { countryName: "Canada", code: "ca" },
        { countryName: "United States", code: "us" }
      ]
    };
  }
};
</script>

Null / Empty Options

We can set options to an empty array if we don’t want any options displayed.

Getting and Setting

We can bind the selected value to a state with v-model .

For example, we can write:

<template>
  <div id="app">
    <v-select v-model="selected" :options="options"></v-select>
    {{selected}}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: ["Canada", "United States"]
    };
  }
};
</script>

selected will automatically be changed to the value selected.

We can also set the value prop if we only want to set the value selected:

<template>
  <div id="app">
    <v-select :value="selected" :options="options"></v-select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "Canada",
      options: ["Canada", "United States"]
    };
  }
};
</script>

Returning a Single Key with reduce

We can return a single key with the reduce prop.

For example, if we have:

<template>
  <div id="app">
    <v-select
      v-model="selected"
      :reduce="country => country.code"
      label="countryName"
      :options="options"
    ></v-select>
    {{selected}}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { countryName: "Canada", code: "ca" },
        { countryName: "United States", code: "us" }
      ]
    };
  }
};
</script>

Then v-model will be bound to the code value of the selected object with the selected object.

reduce works with deeply nested values.

For example, we can write:

<template>
  <div id="app">
    <v-select
      v-model="selected"
      :reduce="country => country.meta.code"
      label="countryName"
      :options="options"
    ></v-select>
    {{selected}}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { countryName: "Canada", meta: { code: "ca" } },
        { countryName: "United States", meta: { code: "us" } }
      ]
    };
  }
};
</script>

The selected value is now bound to the meta.code property of the selected object.

Conclusion

The vue-select package lets us add a lot more functionality to a dropdown than a regular select element.