Question

我在尝试根据在线示例在Vue.js中连接指令时遇到问题。

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

这是与主Vue应用程序内联的指令

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

当我运行它时，无论是使用绑定还是更新挂钩，el，binding，vnode都是未定义的？我做错了什么？

Answer 1

问题代码与Vue 2正常工作.OP无意中使用了Vue 1。

＆＃13;

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
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue@2.4.2"></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>

＆＃13;

本地指令Vuejs参数未定义

1 个答案: