<template>
<div>
<img v-directive:dynamic_literal />
</div>
</template>
E.g. dynamic_literal = 'ok' such that in custom directive:
Vue.directive('directive', {
bind(el, binding) { binding.arg // should return 'ok'
How can I use dynamic_literal as a variable or a constant whose value should be assigned under data or prop.
I tried with v-directive:{{dynamic_literal}} and :v-directive="dynamic_literal" but no use.
Thanks in advance!
working for me:
<div v-mydirective:[dynamicArg]="foo">
to access it with binding.arg
more info: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0003-dynamic-directive-arguments.md
A little late but maybe it's of some use... You can actually get dynamic arguments in Vue directives by using the vnode parameter passed to the directive hook functions. We'll use the argument itself as the property name that we want to access in the context of vnode. This also works with computed properties, for example.
Vue.directive('directive', function(el, binding, vnode){
el.innerHTML = vnode.context[binding.arg];
});
new Vue({
el: '#app',
template: '<div v-directive:argument></div>',
data: {
argument: 0
},
mounted() {
setInterval(() => ++this.argument, 1000);
}
});
(using the function shorthand for directives here)
I don't think there is any way you could make the argument dynamic, but the value can be.
console.clear()
Vue.directive("test", {
bind(el, binding){
console.log(binding)
},
update(el, binding){
console.log(binding)
}
})
new Vue({
el:"#app",
data:{
dynamic_literal: 'ok'
}
})<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<h1 v-test="dynamic_literal">Hello World</h1>
<button @click="dynamic_literal='not ok!'">Change literal</button>
</div>Note when you run the above snippet that the value property changes in the log when you click the button.
There is no way to pass dynamic arguments to a directive but you can create an intermediate component that dynamically render that value passed via prop.
export default {
render(createElement) {
return createElement(
'img', {
directives: [
{
name: 'directive',
arg: this.literal,
},
],
}
);
},
props: {
literal: {
type: String,
required: true,
},
},
};
So this code should do the trick
<template>
<div>
<new-img-component :literal="dynamic_literal" />
</div>
</template>
I suggest you can try to do something like this:
<div v-mydirective="{text: dynamic_literal}">
with dynamic_literal is a variable in your props/data of the component
I ran into a similar issue, where my binding.value was meant to be dynamic, but it wouldn't update or act reactively.
The resolution for me was adding beforeUpdate when creating the directive. Initially, I only used mounted, so the first value provided always persisted.
