7 |
5 | The property 6 | autocomplete-items 7 | expects an array. We pass through the computed property 8 | filteredItems, 9 | which is a filtered collection based on the string 10 | tag 11 | and the possible items: Spain, France, USA, Germany and China. 12 |
13 |5 | In this example music artists can be found with the autocomplete function. 6 | The iTunes API 7 | is requested as data source. As supporting http library, 8 | axios 9 | is used. The property add-only-from-autocomplete 10 | disables adding tags from input directly. 11 | A debounce avoid too much requests when typing. 12 |
13 |5 | In this example, we push the addTag function 6 | in handlers, if the 7 | before-adding-tag hook fires. 8 |
9 |
10 | Its might be suprising that we are using an array here. That's because we can have mulitple
11 | addTag functions. If we are using separators (see prop
12 |
20 | If the handlers array is not null, 21 | we show two buttons. The "Add" button invokes the saved functions on click 22 | and the tag/s will be added. 23 |
24 |5 | In the checkTag function, which is called 6 | by the before-adding-tag hook, some logic is executed. 7 | If a to adding tag contains the letter "e", an alert box is shown. 8 |
9 |
6 | The tags input component provides different hooks.
7 | A callback function can be registered, to control the behaviour of tags input.
8 | For example like that: @before-adding-tag="myCallback".
9 | Before a tag is added, the function myCallback is invoked
10 | and gets an object as parameter. The object contains the properties
11 | tag, which is the to adding tag and a function named
12 | addTag. If this function is invoked,
13 | tag will be added.
14 | You find more information in the
15 |
6 | Create the file vue-tags-input.js with the following content 7 | in the ./plugins folder. 8 |
9 | 10 |import Vue from 'vue';
12 | import VueTagsInput from '@johmun/vue-tags-input';
13 |
14 | Vue.use(VueTagsInput);
15 |
16 | 19 | Add VueTagsInput to the plugins list in your 20 | nuxt.config.js 21 |
22 | 23 |plugins: [{ src: '~/plugins/vue-tags-input', ssr: false }],
25 | build: {
26 | vendor: ['@johmun/vue-tags-input'],
27 | // more config
28 | }
29 |
30 | 33 | Now you can use VueTagsInput like this: 34 |
35 | 36 |22 | You can add CSS classes to tags, the input element or 23 | to autocomplete items, in the following ways: 24 |
25 |37 | CSS Classes which are added from tags input: 38 |
39 |56 | Styles can also be changed with the property 57 | style in an autocomplete item or a tag. 58 | But be aware that those styles have a high priority, 59 | because they will be set inline. 60 |
61 |5 | Templates are a powerful tool to customize tags input even more. 6 | In this example we use the slots 7 | tag-left and 8 | autocompleteItem to insert 9 | material icons 10 | on the left of each tag and autocomplete item. The property 11 | allow-edit-tags is set to true, 12 | to enable editing tags after creation. 13 |
14 |
15 | Via slot-scope we access some properties and helper functions.
16 | The autocomplete item slot for example, gets the performAdd
17 | function, which adds a new tag to the collection by passing an index.
18 | You can read the
5 | This is the default behaviour of every tag recreated with the slot 6 | tag-center. 7 | The component TagInput is a helper to fastly build 8 | the standard text input, which provides the ability to edit tags after creation. 9 | The css class ti-hidden is provided by tags input. 10 | It's a helper class which enlarges a tag while the user is typing. 11 |
12 |7 | All slot names are now in kebab-case. 8 |
14 | The function performSaveTag, 15 | provided via slot-scope, is now called performSaveEdit 16 |
17 |19 | To validate tags, autocomplete items or the user input, a validation array 20 | can be passed to the tags input component. In this example, a tag has to be 21 | at least 8 characters long, can't contain a number or a brace and must not start 22 | with the string "Cannot". 23 |
24 |
38 | Each item in the validation array must contain the properties
39 | classes and rule.
40 | classes will be added as css class, if the related
41 | rule matches a tag, the user input or an autocomplete item.
42 | The rule can by type of RegExp or function.
43 | In chapter
47 | If the rule is valid, the class "ti-valid", or if not, "ti-invalid" is also added. 48 | If the tag input component finds a duplicate item, the class "ti-duplicate" is appended. 49 | By default the prop avoid-adding-duplicates is true. 50 | So in this example it is impossible to add duplicates. 51 |
52 |53 | If a validation item holds the property disableAdd: true, 54 | a tag, which does match the appropriated rule, won't get just some css classes. 55 | In this case, the tag can't be added to the tags array. 56 | Like every tag which starts with "Cannot" in this example. 57 |
58 |63 | You should be aware, that if you use the validation feature, 64 | vue-tags-input validates the passed tags and edits/adds the property 65 | tiClasses. To get the validated tags, 66 | vue-tags-input emits @tags-changed. 67 |
68 |69 | The event is only emitted, 70 | if the user does a action like adding, editing or deleting a tag. 71 |
72 |73 | If you want updates, if vue-tags-input detects unvalidated tags, 74 | you can use the .sync modifier: 75 | :tags.sync="tags" 76 |
77 |
78 | Another way would be to validate tags by yourself
79 | and pass them to vue-tags-input, see chapter
80 |
npm install @johmun/vue-tags-input
22 | 27 | vue-tags-input can be included via CDN and it registrates itself as a global component. 28 |
29 |<script src="{{ cdnUrl }}"></script>
31 | All CSS classes used by vue-tags-input are prefixed with ti-
6 |14 | The property type in a validation item 15 | has been renamed to classes. 16 | And the function rule 17 | gets the complete tag as parameter. 18 |
19 |27 | All slot names are now in kebab-case. For example in version 1, 28 | most of the slot names where in camelCase like tagLeft 29 | or autocompleteItem. All those names have changed to 30 | the kebab-case pattern: 31 | tag-left or autocomplete-item 32 |
33 |34 | The function performSaveTag, 35 | provided via slot-scope, is now called performSaveEdit 36 |
37 | 38 |40 | The prop delete-on-backslash 41 | has been renamed to delete-on-backspace 42 |
43 |A generic UI component to input tags, with a couple of features
5 |52 | License: 53 | MIT 54 |
55 |Copyright (c) {{ new Date().getFullYear() }} Johannes Munari
56 |