In this tutorial we're going to use a VueJS component to easily add a tags input box to a form. You may use this input type in situations like creating tags for a blog post. It will allow you to add multiple items to a text box, separated by spaces and then collect this value as an array. For this component we're going to use the V-tag-input component which can be found on github. You can install the component via NPM by using the following command.
npm i --save v-tag-input
Once it's installed you can add it to any VueJS component by importing it into the script tag of the component.
import VTagInput from 'v-tag-input'
Then you need to define the VTagInput type as a new component by adding it to the component node.
components: {
VTagInput
}
Now we can add this into the HTML by simply using the new component inside the HTML.
<v-tag-input v-model="tags" class="input"></v-tag-input>
The value inside the v-model will create an array of the space separated items inside the textbox. If you want to output the different tags from the input box you can do so by simply printing the tags value.
{{ tags }}
To see a demo of this component you can view the following JSFiddle. Demo