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 how to make our directives accept arguments and values to directives and use them in our code.
Dynamic Directive Arguments
We can pass in arguments and values to a directive and then get these values from the binding parameter.
For example, we can make a directive that takes an argument and value as follows:
src/index.js :
Vue.directive("position", {
bind(el, binding, vnode) {
const validPositions = ["relative", "fixed", "absolute"];
if (validPositions.includes(binding.arg)) {
el.style.position = binding.arg;
el.style.top = `${binding.value}px`;
}
}
});
new Vue({
el: "#app",
data: {
message: "Hello"
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-position:absolute="50">{{message}}</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
In the code above, we defined a positiion directive that takes an argument, which is accessed in the bind hook by using the binding parameter.
The binding parameter has an arg property to get the argument, which is absolute in index.html .
binding.value gets us the value, which is 50 in index.html .
Then we get the element that the directive is bound to with el and then we set the positioning of the element via the values from the binding parameter.
Accepting arguments and values make directives much more flexible than without arguments.
Function Shorthand
If we only have code in the bind and update hooks, then we can just pass in a function with the same signature as those hooks.
For example, we can shorten the example above to:
Vue.directive("position", (el, binding, vnode) => {
const validPositions = ["relative", "fixed", "absolute"];
if (validPositions.includes(binding.arg)) {
el.style.position = binding.arg;
el.style.top = `${binding.value}px`;
}
});
They both do the same thing.
Object Literals
We can pass in an object literal as the value of a directive if our directive needs to accept multiple values.
For example, we can write the following code to accept an object’s properties’ values in our directive:
src/index.js:
Vue.directive("position", (el, binding, vnode) => {
const validPositions = ["relative", "fixed", "absolute"];
const { position, top } = binding.value;
if (validPositions.includes(position)) {
el.style.position = position;
el.style.top = top;
}
});
new Vue({
el: "#app",
data: {
message: "Hello"
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-position="{ position: 'absolute', top: '50px' }">{{message}}</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
The code above accepts an object with the position and top property and we take the object’s values and then set them as the style of the p element which the position directive is bound to.
A directive’s value can be any valid JavaScript expression.
Conclusion
Vue directives can take arguments and values. We can get argument values from the binding parameter of the bind hook via the binding.arg property.
To get the value passed to a directive, we can get it from the bind hook’s binding parameter via the binding.value property.
If our directive only has bind or update hooks, then we can shorten it to a function, which has the same signature as the bind or update hooks.
