Vue-2-3-Multiselect tagging and filters

Vue-Multiselect Tagging and Filters | Vue 2 & 3

Install the NPM if you are not installed in your project directory.

 npm install vue-multiselect --save


Multi-select Tagging:-

You can set the :taggable prop to true to add tagging functionality in a single or multiple selects and selecting this temporary option will emit the @tag event with the current typed search query as the first param.
Optional configuration flags:-
1.      tag-placeholder="Add this as new tag", it is a tag suggestion message
2.      tag-position="bottom",  it is tag position  and it will be set to 'top' or 'bottom' and the default tag position is top.

An example is details -

user-json object:-

[
    { "name": "Anil Singh", "code": "Ak" },
    { "name": "Reena Singh", "code": "RS" },
    { "name": "Aradhya Singh", "code": "AS" }
]

JavaScript Code Sample: -

import Multiselect from 'vue-multiselect'

export default {
    components: {
        Multiselect
    },
    data() {
        return {
            value: [
                { "name": "Anil Singh", "code": "Ak" },
            ],
            options: [
                { "name": "Anil Singh", "code": "Ak" },
                { "name": "Reena Singh", "code": "RS" },
                { "name": "Aradhya Singh", "code": "AS" }
            ]
        }
    },
    methods: {
        addTag(newTag) {
            const tag = { name: newTag, code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000)) }
            this.options.push(tag)
            this.value.push(tag)
        }
    }
}

HTML Code Sample: -

<div class="multiselectTags">
    <label class="typo__label">Vue 2 and 3 Multiselect filter and Tagging</label>
    <multiselect v-model="value"
                 tag-placeholder="Add this as new tag"
                 placeholder="Search or add a tag"
                 label="name"
                 track-by="code"
                 :options="options"
                 :multiple="true"
                 :taggable="true"
                 @tag="addTag"></multiselect>
    <pre class="user-json"><code>{{ value  }}</code></pre>
</div>

Reference Links -  

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Vue-Multiselect Tagging and Filters | Vue 2 & 3 Vue-Multiselect Tagging and Filters |  Vue 2 & 3 Reviewed by Anil Singh on 9:34 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^