Published on: 08 February, 2018

How to create custom directives in Vue.js?

Posted by andy | 330 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

In this tutorial, you will learn on how to create custom directives in Vue.js. We will create two custom directives that will perform a check for an input that will accept numbers only and another custom directive that will accept whole numbers only. We will implement blur event on the input and if the user has entered wrong input. It will return 0 as default value.

Let get started by importing the Vue.js library.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Here are the javascript for our two custom directives in Vue.js.

Vue.directive('number', {
	bind(el, binding, vnode) {
		var inputHandler = function(e){
			if(isNaN(Number(e.target.value))){
				e.target.value = 0;
			}
		}
		el.addEventListener("blur", inputHandler);
	} 
})

Vue.directive('whole-number', {
	bind(el, binding, vnode) {
		var inputHandler = function(e){
			if(!Number.isInteger(parseFloat(e.target.value))){
				e.target.value = 0;
			}
		}
		el.addEventListener("blur", inputHandler);
	} 
})

To check for a number value, we can use the built-in Javascript isNaN and Number function. While for checking the whole number value, we can use the built-in Javascript isNaN and parseFloat function. We are using parseFloat rather than parseInt because if we pass a value of 1.23. The parseInteger function will return a value of 1 which will return a wrong assumption when we using the function Number.isInteger(). Therefore we use the parseFloat function instead.

This will be the code for our html parts.

<div id="example">
	<p>Numbers only: <input v-number></p>
	<p>Whole Numbers only: <input v-whole-number></p>
</div>

The final code is by calling the instance of Vue.js against the element of example in div tag HTML.

new Vue({
	el: "#example"
});

Demo of Custom Directives in Vue.js

You can see the demo of the above custom directives in here.

Numbers only:

Whole Numbers only:

If you have any question regarding with this article, feel free to post your comment below.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Share your article with us and add your own google adsense account to earn extra money. Plus, you can promote a link back to your site.
Related Articles
Published on: 10 March, 2018
In this tutorial, you will learn how to create a custom form validation in Vue.js. I will create a simple validation using the help of JQuery library for the event attachment and DOM query. If you do not want to use JQuery, feel free to change it to native Javascript. The reason why I use JQuery library is to save time in the development phase. Let's get started with the concept.
Published on: 23 February, 2018
Once you have completed the development phase of your Vue.js app, you want to start deploying or publishing your Vue.js app. To deploy it is pretty simple, what you have to do is to deploy using the Node.js command prompt. Note: this only applies if you are using the CLI mode without using the Vue.js script tag directly
Published on: 23 February, 2018
To turn off the eslint feature in your Vue.js app is pretty simple. What you need to do is to go to the root folder and look for the config folder in your Vue.js project. There will be a file named index.js and look for the wording useEslint option.