Blog

Vue.js

Vue.js 2.6 – dynamic directive arguments

I’m writing a series about Vue.js, version 2.6, the most recent one. This is the second post, the first is here: http://openbox.pt/vuejs/vue-js-2-6-slots.

In Vue.js 2.6 we now can use dynamic arguments with directives. So, the specific argument that we want to use is only known at runtime. It is not hard-coded but dynamically generated. That, of course, can be used in several scenarios.

Let us think that, in a given element, we want to add an “id” or “class” according to some custom logic.

The code is:

This example will, half the time, insert an “id” of “test” and, the other half, a “class” of “test”, as you might easily check.

The syntax is fairly straightforward. We just use square brackets around the JavaScript expression, with the v-bind (or the usual shorthand, :), like we did in the code above.

For some more detail a good link is: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0003-dynamic-directive-arguments.md

Leave your thought here