Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at some simple Vue packages for adding rich input controls to our Vue apps.
vue-input-tag
The vue-input-tag package lets us add an input control to let users enter multiple tags.
We can install the Node package version by running:
npm install vue-input-tag --save
Also, we can include the library from a script tag by writing:
<script src="https://unpkg.com/vue-input-tag"></script>
Then we can use it as follows:
main.js
import Vue from "vue";
import App from "./App.vue";
import InputTag from "vue-input-tag";
Vue.component("input-tag", InputTag);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<input-tag v-model="tags"></input-tag>
<p>{{tags}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { tags: [] };
}
};
</script>
In the code above, we registered the vue-input-tag plugin in main.js . Then we just add the input-tag component from the package into our component.
In the component object, we have the data method that returns an object with the tags model, which is an array.
Then when we enter the tags, we see them displayed below the input.
In addition to the v-model directive to bind the data, it also takes the following props:
value— an array of tags to be rendered in the inputplaceholder— a string for the placeholderread-only— boolean to set the input to read-onlyadd-tag-on-blur— Boolean to indicate whether to add the tag when the input control loses focuslimit— string or number to set a limit on the number of tagsvalidate— validator for user input. We can choose fromemail,url,text,digits, orisodate, or we can pass in a function or regex object for custom validationadd-tag-on-keys— an array of keys that are going to be added to new tagsallow-duplicates— boolean to indicate whether we want to allow duplicate tagsbefore-adding— a sync or async function that lets us normalize tag before adding
We can use some of these props as follows:
<template>
<div id="app">
<input-tag v-model="tags" :before-adding="toUpperCase"></input-tag>
<p>{{tags}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { tags: [] };
},
methods: {
toUpperCase(v) {
return v.toUpperCase();
}
}
};
</script>
In the code above, we added the toUpperCase method that converts whatever we entered to uppercase before setting the value in our model property.
So everything entered will become uppercase automatically.
vue-dropdowns
vue-dropdowns is a simple Vue package that lets us add a dropdown without writing all the code from scratch.
It’s very simple and doesn’t have many configuration options.
To install it, we run:
npm install vue-dropdowns
to install the Node package.
Then we can use it as follows:
App.vue :
<template>
<div id="app">
<dropdown
:options="arr"
:selected="object"
v-on:updateOption="onSelect"
placeholder="Select"
:closeOnOutsideClick="true"
></dropdown>
<p>{{object}}</p>
</div>
</template>
<script>
import dropdown from "vue-dropdowns";
export default {
name: "App",
data() {
return {
arr: [
{
name: "Foo",
value: "foo"
},
{
name: "Bar",
value: "bar"
},
{
name: "Baz",
value: "baz"
},
],
object: {}
};
},
components: {
dropdown: dropdown
},
methods: {
onSelect(payload) {
this.object = payload;
}
}
};
</script>
In the code above, we imported the dropdown component from the package. Then we added the onSelect method to set this.object to the value that’s selected from the dropdown.
In the data method, we return an object with an array of options for our dropdown. Each entry on arr has the name and value properties, where the name property’s value will be displayed from in the dropdown.
We set arr as the value of the options prop to populate the dropdown with the items from arr .
selected binds to the selected value, which is compared deeply instead of using === to do the comparison.
v-on:updateOption runs an event handler when an item is selected. In this case, it’ll be the onSelect method that we defined. The payload parameter has the selected item.
placeholder is the placeholder for the dropdown. closeOnOutsideClick is set to true so that it’ll close when we click outside.
Then when selecting something from the dropdown, we’ll see the object of the selected item displayed.
Conclusion
vue-input-tag provides us with an input control that lets us enter tags.
The vue-dropdowns package lets us add a dropdown with various options.
