I'm struggling to properly set up a directive in Vue.js by following an example I found online.
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Here's the directive within the main Vue App code:
const app = new Vue({
el: '#app',
data: {
message: 'hello!'
},
directives: {
demo: {
update: function (el, binding, vnode) {
console.log(el);
console.log(binding);
console.log(vnode);
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
}
}
})
After running this code, the el,binding, and vnode variables are all showing up as undefined. What mistake am I making here?