We can add a dropdown easily with the vue-select package.
First, we install the package by running:
npm install vue-select
Then we register the plugin by writing:
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");
We register the component with:
Vue.component("v-select", vSelect);
and added the required CSS with:
import 'vue-select/dist/vue-select.css';
Then we can create a basic drop down in our component by writing:
<template>
<div id="app">
<v-select :options="['apple', 'orange']"></v-select>
</div>
</template>
<script>
export default {};
</script>
We passed in an array of strings, which will be the display text and the value.
Also, we can pass in an array of objects:
<template>
<div id="app">
<v-select label="text" :options="options"></v-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: "apple", text: "Apple" },
{ value: "orange", text: "Orange" }
]
};
}
};
</script>
We have the options
array, and we set the label
prop to choose the property to display to the user.
We set it to text
, so we display the value of the text
property of each entry to the user.
To get the value selected, we can bind the selected value to a state with the v-model
directive:
<template>
<div id="app">
<v-select label="text" v-model="selected" :options="options"></v-select>
<p>{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: "apple", text: "Apple" },
{ value: "orange", text: "Orange" }
],
selected: ""
};
},
};
</script>
Now we’ll get the object selected if we pick one from the list.
To assign the value
property’s value to selected
, we can pass in a function to the reduce
prop:
<template>
<div id="app">
<v-select label="text" :reduce="reduce" v-model="selected" :options="options"></v-select>
<p>{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: "apple", text: "Apple" },
{ value: "orange", text: "Orange" }
],
selected: ""
};
},
methods: {
reduce(fruit) {
return fruit.value;
}
}
};
</script>
Now the value of value
is set as the value of selected
when we pick our choice.
To add a placeholder, we can use the placeholder
prop:
<template>
<div id="app">
<v-select
label="text"
placeholder="choose a fruit"
:reduce="reduce"
v-model="selected"
:options="options"
></v-select>
<p>{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: "apple", text: "Apple" },
{ value: "orange", text: "Orange" }
],
selected: ""
};
},
methods: {
reduce(fruit) {
return fruit.value;
}
}
};
</script>
Now we’ll see ‘choose a fruit’ before we make a choice.
When we click ‘x’ to clear the selection, we’ll see the placeholder again.
We can use the vue-select package to add a customizable drop-down easily.
It can bind to states with v-model
and add a placeholder with the placeholder
prop.