Vue Js Multiselect dropdown: Vue.js multiple select dropdown is a powerful web application application component that allows users to select multiple items from a dropdown list. A select drop-down menu allows the user to select multiple options from a list. This attribute allows us to select multiple items from a drop-down list by holding down the Ctrl (Windows) or Command (Mac) button to select multiple options. In this tutorial, we will learn how to select multiple dropdown options using Vue JS.
In Vue Js, how do you select multiple options from a drop-down list?
To select multiple items from a dropdown list, set the Multiple attribute to true.
Select multiple options in dropdown Vue Js
<div id="app">
<select multiple="true" v-model="multipleSelect" style="width:150px;">
<option v-for="book in books" :value="book.name">{{book.name}}</option>
</select><br><br>
<p>{{ multipleSelect }}</p
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
multipleSelect: [""],
books: [
{ id: 1, name: 'Vue Js' },
{ id: 2, name: 'React Js' },
{ id: 3, name: 'Angular Js' },
{ id: 4, name: 'Node Js' },
{ id: 5, name: 'PHP' },
{ id: 6, name: 'Express JS' },
]
}
},
}).mount("#app");
</script>
Note: Select multiple items from a drop-down list by holding down the Ctrl (Windows) or Command (Mac) button to select multiple
Output of above example
