CODEWITHSUNDEEP
javascriptvue.js
Isaac Levin
Isaac Levin

Reputation: 2899

Local Directive Vuejs arguments are undefined

I am having issues trying to wireup a directive in Vue.js based on the example online.

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Here is the directive inline with the main Vue App

    const v = 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(', ')
                }
            }
        }
   })

When I run this, whether it is using bind or update hook, el,binding,vnode are all undefined? What am I doing wrong?

Upvotes: 2

Views: 709

Answers (1)

Bert
Bert

Reputation: 82439

The question code works correctly with Vue 2. OP was using Vue 1 unintentionally.

console.clear()

function onLifecycle(el, binding, 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(', ')
}

const v = new Vue({
  el: '#app',
  data: {
    message: 'hello!',
    visible: false
  },
  directives: {
    demo: {
      bind: onLifecycle ,
      update: onLifecycle
    }
  }
})
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <div  v-if="visible">
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
  </div>
  <button @click="message='world'">Update Message</button>
  <button @click="visible=!visible">Toggle Visible</button>
</div>

Upvotes: 3

Related Questions