Lokale Richtlinie Vuejs Argumente sind undefined

Ich habe Probleme, eine Direktive in Vue.js basierend auf dem Beispiel online zu verbinden.Lokale Richtlinie Vuejs Argumente sind undefined

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

Hier ist die Direktive inline mit dem Haupt 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(', ') 
       } 
      } 
     } 
    })

Als ich das laufen, ob es sich binden oder zu aktualisieren Haken verwendet, el, binding, vnode sind nicht definiert? Was mache ich falsch?

Quelle

2017-09-27 Isaac Levin

scheint gut zu funktionieren https://codepen.io/Kradek/pen/zEwOvd?editors=1010 – Bert

Das ist seltsam, wenn ich aus diesem Stift, dass Code kopieren, nicht wahr Arbeit. Muss das Div sichtbar sein? Wie wenn ich v-wenn das zeigt es direkt vor dem Aufruf von Direktive tut das bricht es? –

Welche Version von Vue verwenden Sie? Sichtbarkeit ist kein Problem (der Stift ist mit der Fähigkeit aktualisiert, es umzuschalten). – Bert

Der Fragecode funktioniert korrekt mit Vue 2. OP verwendete Vue 1 unabsichtlich.

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>

Quelle

2017-09-27 18:35:41 Bert

Lokale Richtlinie Vuejs Argumente sind undefined

Antwort

Verwandte Themen