vue-tags-component is a Vue.js 2 tag component that allows adding and removing tags.

vue tags input, how to add and remove class in vue js, vue event add class, vue classlist add, vue class from method, vue refs add class

Features

• keyboard control
• Search
• events
• tabindex
• colored tags
• tags creation

[API] A Versatile Tag Input Component Built With Vue 3 | TagInput

How to make use of it:

Installation:

$ npm install --save vue-tags-component
or yarn:
$ yarn add vue-tags-component

1. The most common use case is to register the component globally:

import Vue from 'vue';
import { VueTags } from 'vue-tags-component';

Vue.component('vue-tags', VueTags);

2. On your page you can now use the html like this:

<vue-tags
    :active="activeTags"
    :all="allTags"
    :element-count-for-start-arrow-scrolling="3"
    :tab-index="1"
    :tag-creation-enabled="true"
    :colors-enabled="false"
    :colors="colors"
    :tag-color-default="'green'"
    :tag-list-label="'Select an option'"
    :placeholder="'Select an option'"
    @on-tag-added="onTagAdded"
    @on-tag-removed="onTagRemoved"
    @on-tag-list-opened="onTagListOpened"
    @on-tag-list-closed="onTagListClosed"
    @on-tag-created="onTagCreated"
/>

3. All props and events are indicated in the example above. The tags should look like this:

[
    {
        "id": 1,
        "name": "Tag",
        "slug": "tag (optional)",
        "color": "#963dff (optional)"
    }
]

Events

on-tag-added

Called when the tag is added to the active list, it passes the tag object.

on-tag-removed

Called when the tag is removed from the active list, it passes the tag object.

on-tag-list-opened

Called when opening a list of tags.

on-tag-list-closed

Called when the list of tags is closed.

adding and removing tags, vue-tags-component Plugin/Github, vue pass class to component, how to remove tags in html

See Demo And Download

Official Website(ek0t0v): Click Here

This superior jQuery/javascript plugin is developed by ek0t0v. For extra advanced usage, please go to the official website.