VueJS 2 Direktiven Ereignis einfügen

Ich bin neu VueJS Student, und ich habe versucht, eine Direktive zu machen, und ich habe aufgehört, weil ich nicht weiß, warum ich das Element nicht bekommen kann. Was mache ich falsch? Ich möchte nur das el Element bekommen.VueJS 2 Direktiven Ereignis einfügen

Hier ist eine JSFiddle oder der Code unten.

HTML

<div class="container" id="vue-app"> 
    <ul> 
     <li v-test v-for="item in itens"> 
     {{item.name}} 
     </li> 
    </ul> 
    <span id="directiveLog"></span> 
</div>

Vue.directive('test', { 
    inserted: function (el) { 
     document.querySelector('#directiveLog').innerHTML = el; 
    } 
}) 

new Vue({ 
    el: '#vue-app', 

    data: { 
    itens:[ 
    {name: "hello"}, 
    {name: "fun"}, 
    {name: "world"} 
    ] 
    } 

});

Quelle

2017-12-21 Johnson

Überprüfen Sie Ihre Konsolenprotokoll: VueJS nicht geladen, weil Sie von einer URL sind hotlinking, die du tun, dass verhindert. Versuchen Sie, es von einem CDN zu laden (wie aus [cdnjs] (https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js)), und Ihre Anweisung sollte funktionieren: https://jsfiddle.net/teddyre/7r9x60ps/1/. Beachten Sie, dass ein HTML-Knoten ein Objekt ist. Daher kann ein innerHTML (das eine Zeichenfolge akzeptiert) für den Knoten (ein Objekt) nicht funktionieren. Du meintest wahrscheinlich: 'document.querySelector ('# directoryLog'). InnerHTML = el.innerHTML' – Terry

Vue ist geladen, sonst hätte nichts gerendert. Es ist zweimal geladen ist das Problem und der zweite ist Vue 1. – Bert

Parameter 'el' in Funktion eingefügt (el) {...} - es ist Ihr Element, in dem v-Test eingeführt wird .

Vue.directive('test', { 
 
     inserted: function (el) { 
 
      document.querySelector('#directiveLog').innerHTML = el.innerHTML; 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#vue-app', 
 

 
    data: { 
 
    itens:[ 
 
    {name: "hello"}, 
 
    {name: "fun"}, 
 
    {name: "world"} 
 
    ] 
 
    } 
 

 
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
 
    <div v-test class="container" id="vue-app"> 
 
       <ul> 
 
        <li v-for="item in itens"> 
 
        {{item.name}} 
 
        </li> 
 
       </ul> 
 
       <span id="directiveLog"></span> 
 
      </div>

Quelle

2017-12-21 14:30:19 Sergey

Ohhh Gott, so grundlegende Javascript Fehler ... danke Mann! :) – Johnson

@Johnson Gern geschehen! – Sergey

VueJS 2 Direktiven Ereignis einfügen

Antwort

Verwandte Themen