To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to add form tags to our forms.
Form Tags
Form tags are custom tagged input form control.
We can customize it and allow duplicate tag selection and tag validation.
To add it, we can use the b-form-tags component.
For instance, we can write:
<template>
<div id="app">
<b-form-tags v-model="value"></b-form-tags>
<p>Value: {{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: ["banana", "grape"]
};
}
};
</script>
to display an input that lets us enter tags.
v-model will bind the inputted values to an array as we can see from the p element.
When we press Enter, we’ll add the value.
We can add the no-add-on-enter prop to disable adding a new tag on entering.
And we can add tags on change with the add-on-change prop.
Tag Creation with Separators
Tag creation can be added with separators.
We can add the separator tag with all the separators we want to let users use.
For instance, we can write:
<template>
<div id="app">
<b-form-tags v-model="value" separator=" ,"></b-form-tags>
<p>Value: {{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: ["banana", "grape"]
};
}
};
</script>
Then we can use the space and the comma as separators.
When we type them, we’ll see a new tag.
Last Tag Removal with Backspace
By default, the b-form-tags component doesn’t remove tags when we press backspace.
To let users press backspace to remove the last tag, we can use the remove-on-delete prop.
For example, we can write:
<template>
<div id="app">
<b-form-tags v-model="value" remove-on-delete></b-form-tags>
<p>Value: {{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: ["banana", "grape"]
};
}
};
</script>
Then we can remove the last item with backspace.
Styling
We can style the tags with various props.
tag-pills renders the tags with the appearance of the pill.
tag-variant applies the styling variants built into Bootstrap.
size sets the size of the component’s appearance.
placeholder lets us set placeholder text for the input element.
state lets us set the validation state. We set it to true for valid, false for invalid or null .
disabld lets us disable the input.
For instance, we can write:
<template>
<div id="app">
<b-form-tags v-model="value" tag-pills size="lg"></b-form-tags>
<p>Value: {{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: ["banana", "grape"]
};
}
};
</script>
Then the tags are more rounded and the size is bigger.
Tag Validation
We can use the tag-validator to validate the tags.
For instance, we can write:
<template>
<div id="app">
<b-form-tags v-model="value" :tag-validator="tagValidator"></b-form-tags>
<p>Value: {{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: ["banana", "grape"]
};
},
methods: {
tagValidator(tag) {
return tag.length > 2;
}
}
};
</script>
We have the tag-validator prop set to the tagValidator method.
We check that if the tag’s length is bigger than 2.
We’ll see an error message if the tag doesn’t meet that condition.
Detect New, Invalid and Duplicate Tags
We can listen to the tag-state event.
It’s emitted whenever new tags are entered into the new tag input element.
When tags don’t pass validation or duplicate tags are detected then this will also be emitted.
For instance, we can write:
<template>
<div id="app">
<b-form-tags v-model="tags" :tag-validator="validator" @tag-state="onTagState"></b-form-tags>
<p>Value: {{ tags }}</p>
<p>Invalid: {{ invalidTags }}</p>
<p>Duplicate: {{ duplicateTags }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
tags: [],
validTags: [],
invalidTags: [],
duplicateTags: []
};
},
methods: {
onTagState(valid, invalid, duplicate) {
this.validTags = valid;
this.invalidTags = invalid;
this.duplicateTags = duplicate;
},
validator(tag) {
return tag.length > 2 && tag.length < 6;
}
}
};
</script>
We have the onTagState method that’s set as the value of the tag-state event handler.
Also, we have the validator method to set the tag-validator prop.
v-model is used to bind the inputted values to tags .
We display invalid and duplicate tags.
Then when we enter invalid or duplicate tags, they’ll be displayed in the p elements.
Conclusion
We can add the b-form-tags component to add a tags input.
It has features for validation and checking for duplicates.
