Vuetify

Vuetify Alert fade after a duration Vuetify Login Form Vuetify Toast Snackbar Demo Vuetify Disable Past Date in DatePicker Vuetify Scrollable Dialog Vuetify Dialog to Confirm Delete Vuetify input File get Selected file name Vuetify validate textarea character limit Vuetify V-Select multiple example Vuetify Checkbox Check All | Uncheck All Example Vuetify Disable Button for Certain Amount of Time Vuetify Validate Email Field Vuetify Change Button Color if Button active or selected Vuetify Change color of v-chip on click Vuetify Image Upload with Preview Vuetify Clear text field using ref Vuetify Disable Future date in Datepicker Vuetify Set Current Date in Datepicker Vuetify rule for Number Between 0 and 999 or no input Vuetify Validation Rule: Allow Empty String or Specific Number of Characters Vuetify Allow only alphanumeric characters in textfield Vuetify Rule Input Text only Accept Number and Dot Vuetify set Confirm Password Validation Rule in text-fields Vuetify Text Field Allow 10 digit Number Vuetify Add Comma to Input Field Automatically Vuetify Check if input contains special characters

Vuetify V-Select multiple example

Vuetify is a popular Material Design component library for Vue.js, and one of its useful components is v-select, which allows users to make selections from a list of items. In this post, we will explore how to use the v-select component with the "multiple" feature to enable multiple selections. We'll create a simple example that demonstrates this functionality.

written

reviewed

updated

The HTML Structure

Let's start with the HTML structure that includes a Vuetify v-container for our content. Inside the container, we have a heading and a v-select element. Here's what the HTML code looks like:

<v-container>
    <h3>Vuetify V-Select multiple Select example</h3>
    <v-select clearable v-model="selectedSchools" :items="schoolNames" label="Select St. Louis schools" multiple
        chips></v-select>
    <div>
        Selected St. Louis Schools: {{ selectedSchools }}
    </div>
</v-container>

 
<v-container>
    <h3>Vuetify V-Select multiple Select example</h3>
    <v-select clearable v-model="selectedSchools" :items="schoolNames" label="Select St. Louis schools" multiple
        chips></v-select>
    <div>
        Selected St. Louis Schools: {{ selectedSchools }}
    </div>
</v-container>

Run

JavaScript Configuration

Next, we set up our Vue.js application and configure the v-select component using the Vue instance. Here's the JavaScript part of the code:

 <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data() {
                return {
                    selectedSchools: [],
                    schoolNames: [
                        'John Burroughs School',
                        'MICDS (Mary Institute and Saint Louis Country Day School)',
                        'Ladue Horton Watkins High School',
                        'Clayton High School',
                        'Parkway West High School'
                    ]
                };
            }

        })
    </script>

 
 <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data() {
                return {
                    selectedSchools: [],
                    schoolNames: [
                        'John Burroughs School',
                        'MICDS (Mary Institute and Saint Louis Country Day School)',
                        'Ladue Horton Watkins High School',
                        'Clayton High School',
                        'Parkway West High School'
                    ]
                };
            }
​
        })
    </script>

In this code snippet, we create a new Vue instance and define the selectedSchools data property to store the selected schools. We also provide an array of school names in the schoolNames property. The v-select element is configured with the v-model directive to bind it to the selectedSchools property. The "multiple" and "chips" attributes are used to enable multiple selections and display selected items as chips

Output of Vuetify V-Select multiple example

Pasted Image

Conclusion