Search by Queries/Bugs/Errors

Dynamically change mode of select option using vueform multiselect with vue 3

Created at 24-Jan-2024 , By samar

In this tutorial, we will learn how to change the mode of a select option dynamically using the VueForm multiselect library with Vue 3. It will dynamically change the select mode (single, multiple, tags) of a VueForm Multiselect component based on the number of selected options. It utilizes Vue 3 and VueForm Multiselect 2.6.6 library.

Dynamically change mode of select option using CDN for Vue 3 and @VueForm multiselect 2.6.6
When 1 or 2 options are selected, the component utilizes tags mode, visually showcasing each selected item as a tag. When more than 2 options are selected, the component switches to multiple mode, displaying a compact text indicating the total number of selected options (e.g., "3 options selected"). If all available options within a group are selected, the component seamlessly displays "All Selected" to clearly indicate this state.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 with Vueform-Multiselect </title>

    
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    
    <link rel="stylesheet" href="https://unpkg.com/@vueform/multiselect@2.6.6/themes/default.css">
    <script src="https://unpkg.com/@vueform/multiselect@2.6.6/dist/multiselect.global.js"></script>


</head>
<body>

<div id="app">
    <div style="text-align: center; max-width: 400px; margin: 0 auto;">
        
        <div class="multiselectwrap">
            <h3 id="multiselect">#2 - Multiselect</h3>
            <Multiselect v-model="multiselect.selectedOptions" v-bind="multiselect" :mode="computedMode">

                <template v-slot:multiplelabel="{ values }">
                    <div class="multiselect-multiple-label" v-if="allSelected">
                        All Selected
                    </div>
                </template>
            </Multiselect>
        </div>
        
    </div>
</div>

<script>
    
    const app = Vue.createApp({ 

        components: {
            Multiselect : VueformMultiselect,
        },

        data: () => ({
            
            multiselect : {
                selectedMode: 'tags',
                hideSelected : false,
                searchable: true,
                closeOnSelect: false,
                groups : true,
                canClear: false,
                selectedOptions: [],
                options: [
                    {
                        label: 'SELECT ALL',
                        options: ['Batman', 'Robin', 'Joker', 'The Dark Knight', 'Justice League']
                    },
                ],
                value: ['']
            },
        }),

        computed: {
            computedMode() {
                return this.multiselect.selectedOptions.length <= 2 ? 'tags' : 'multiple';
            },
            allSelected() {
                return this.multiselect.selectedOptions.length === this.multiselect.options[0].options.length;
            }
        },
    });

    
    app.mount('#app')
</script>

</body>
</html>
```
Code Explanation :

HTML:

The page includes Vue 3 and VueForm Multiselect CDN links.

The main content is within a div with an ID app.

Inside app, another div displays a header ("#2 - Multiselect") and wraps the Multiselect component.

The Multiselect component uses several props:

v-model: binds the selected options to multiselect.selectedOptions.

v-bind: binds all properties within the multiselect object to the component.

:mode: dynamically binds the current mode based on the computedMode property.

v-slot: defines a custom template for the "multiple label" using the multiplelabel slot.

JavaScript:

Vue.createApp creates a new Vue instance.

The components object registers the Multiselect component from VueForm Multiselect.

The data function defines the multiselect object containing several properties:

selectedMode: initial mode is 'tags' but can be changed.

hideSelected: controls whether selected options are hidden.

searchable: allows searching within the options.

closeOnSelect: keeps the dropdown open after selecting an option.

groups: enables grouped options (nested options).

canClear: allows clearing all selected options.

selectedOptions: array of selected options.

options: array of available options, including a "SELECT ALL" group.

value: an empty string, initially for validation.

The computed property computedMode dynamically determines the mode based on the number of selected options:

If 2 or fewer options are selected, the mode is tags.

Otherwise, the mode is multiple.

The allSelected computed property checks if all options within the "SELECT ALL" group are selected.

The template slot multiplelabel displays "All Selected" only when all options are selected.

Finally, the app is mounted to the #app element.

This code provides a basic example of dynamically changing the Multiselect mode based on user interaction. You can customize it further based on your specific needs and preferred behavior.

Back to code snippet queries related vuejs

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Mongodb Nodejs Php Python React Sql Typescript Vuejs Wordpress

Dynamically change mode of select option using vueform multiselect with vue 3

Dynamically change mode of select option using CDN for Vue 3 and @VueForm multiselect 2.6.6

Random Code Snippet Queries: Vuejs

Latest Code Snippets