Custom directive - vue.js

Question

The documentation for custom directives demonstrates using a dynamic argument and a value together:
Directive arguments can be dynamic. For example, in v-mydirective:[argument]="value", the argument can be updated based on data properties in our component instance! This makes our custom directives flexible for use throughout our application.
If "value" doesn't contain a space, it works fine. But adding a space to the value (e.g. v-mydirective:[argument]="some value") causes Nuxt to choke:
invalid expression: Unexpected identifier in
some value
Raw expression: v-mydirective:[argument]="some value"
What is the problem, and how do I resolve it so that I can use a string with a space as the value to the custom directive?

Answer 1

Issue:
This happens because when we pass value with spaces, the expression is evaluated by vuejs and it tries to find the data options with property some & value. But as none exists with those property names, hence we get the mentioned error.
A simple example to explain this is when we pass value as:
v-mydirective:[argument]="2"
and if we do console.log inside bind function:
console.log(binding.value)
You will see the output displayed as 2. But, if we pass value as:
v-mydirective:[argument]="2 + 2"
and if we do console.log inside bind function, interestingly the output displayed this time is 4 instead of 2 + 2
Solutions:
There are two possible solutions for this:
Solution #1:
You can simply wrap some value in single quotes and pass it as a string like:
v-mydirective:[argument]="'some value'"
This way the expression will be directly evaluated as string instead.
Demo:
Vue.directive('pin', {
bind: function (el, binding, vnode) {
console.log(binding.value)
}
})
new Vue({
el: '#dynamicexample',
data: function () {
return {
direction: 'left',
}
}
})
#dynamicexample {
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
color: #304455;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="dynamicexample">
<p v-pin:[direction]="'some value'">I am pinned onto the page at 200px to the left.</p>
</div>
Solution #2:
You can also create a separate data option for it like:
data: function () {
return {
myValue: 'some value'
}
}
and then you can use it in directive like:
v-mydirective:[argument]="myValue"
Demo:
Vue.directive('pin', {
bind: function (el, binding, vnode) {
console.log(binding.value)
}
})
new Vue({
el: '#dynamicexample',
data: function () {
return {
direction: 'left',
myValue: 'some value'
}
}
})
#dynamicexample {
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
color: #304455;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="dynamicexample">
<p v-pin:[direction]="myValue">I am pinned onto the page at 200px to the left.</p>
</div>