How to create a multi-select with vuetify?

Member

by gilbert , in category: Javascript , 5 months ago

How to create a multi-select with vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by lindsey.homenick , 5 months ago

@gilbert 

To create a multi-select dropdown using Vuetify, you can use the v-select component and set the multiple prop to true. Here's an example code snippet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<template>
  <v-select
    v-model="selectedItems"
    :items="items"
    label="Select items"
    multiple
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      items: ['Option 1', 'Option 2', 'Option 3', 'Option 4']
    };
  }
};
</script>


In this example, we have a v-select component with the v-model bound to selectedItems array and multiple prop set to true. We also provide an array of items to be displayed in the dropdown menu. The user can select multiple items by holding down the Ctrl key while clicking on the options.


You can further customize the appearance and behavior of the multi-select dropdown by using Vuetify's various props and slots. Refer to the official Vuetify documentation for more information on customizing v-select component.