JavaScript-Methoden und Kindelemente in Vue.js

Question

Vue.js ist meine erste reaktive Bibliothek und ich habe Probleme mit Methoden und Kindelementen. Ich vermute, ich vermisse etwas Offensichtliches.

In meinem Beispiel verfügen die gerenderten Listenelemente über Methodenhandler für Hover-Ereignisse (mouseenter & mouseleave). Jedes Listenelement ist ein übergeordnetes Element eines Elements <video>, das standardmäßig angehalten wird. Wenn die Maus ein Listenelement eingibt, spielt ihr Kind(elem.play()). Das Video wird angehalten, wenn die Maus das Listenelement verlässt.

Voll Beispiel: https://jsfiddle.net/matbergman/hcgtkbwt/8/

<ul class="contentList"> 
    <li v-for="item in items" v-on:mouseover="videoPlay()" v-on:mouseleave="videoPause()"> 
    <video loop="loop" v-bind:src="item.video"></video> 
    <p> 
    {{item.description}} 
    </p> 
    </li> 
</ul> 

<script> 

var vm = new Vue ({ 
    el: ".contentList", 
    data: { 
     items: [ 
      { 
       video : "http://206.130.101.116/misc/video01.mp4", 
       description : "Video 1" 
      }, 
      { 
       video : "http://206.130.101.116/misc/video02.mp4", 
       description : "Video 2" 
      }, 
      { 
       video : "http://206.130.101.116/misc/video03.mp4", 
       description : "Video 3" 
      } 
     ] 
    }, 
    methods: { 
     videoPlay: function() { 
      console.log("play"); 
      vm.$el === document.getElementById('example') 
      // Play the child video, something like: this.getElementsByTagName("video")[0].play(); 

     }, 
     videoPause: function() { 
      console.log("pause"); 
      // Pause the child video, something like: this.getElementsByTagName("video")[0].pause(); 
     }   
    } 

}); 

</script> 

Meine Methode erkennt die Mausereignisse. Wie wende ich die Methode play() an das Kind <video> an?

$("li").mouseenter(function() { 
    this.getElementsByTagName("video")[0].play(); 
}); 

Aber der Umfang der this ist natürlich durch meine $ el Variable anstelle des Elements mit dem beigefügten Ereignis definiert, wie ich es gewohnt bin: In jQuery wäre es so etwas wie. Wird die Methode play() irgendwie als Eigenschaft einer Komponente übergeben?

Answer 1

Vue gibt Ihnen Zugriff auf das Ereignisobjekt. explizit mit der $event Variable übergeben werden

<div @click="clickHandler"> 

... oder:

<div @click="clickHandler($event)"> 

Sie können an der Veranstaltung Ziel verwenden

Es wird implizit übergeben, wenn Sie nur den Namen der Methode liefern Greifen Sie auf das Element zu, das das Ereignis ausgelöst hat. Von dort können Sie auf Ihre Kinder zugreifen, wie Sie es beschrieben haben. Hier ist ein Beispiel unter Verwendung von MouseEnter- und mouseleave:

new Vue ({ 
 
    el: ".contentList", 
 

 
    methods: { 
 
    videoPlay: function(event) { 
 
     document.getElementById("consolelog").innerText = "play"; 
 
     event.currentTarget.getElementsByTagName("video")[0].play(); 
 

 
    }, 
 
    videoPause: function(event) { 
 
     document.getElementById("consolelog").innerText = "pause"; 
 
     event.currentTarget.getElementsByTagName("video")[0].pause(); 
 
    }   
 
    } 
 

 
});

li { 
 
    list-style:none; 
 
    padding:1em; 
 
    margin:2em; 
 
    background-color:#f1f1f1; 
 
} 
 

 
li:hover { 
 
    background-color:#ccc; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> 
 
<ul class="contentList"> 
 
    <li @mouseenter="videoPlay" @mouseleave="videoPause"> 
 
    <video loop="loop" src=""></video> 
 
    </li> 
 
</ul> 
 

 
<div id="consolelog" style="position:fixed; top:10px; right:10px; background-color:#ffffcc; padding:5px;"> 
 
</div>

More about events can be found here in the Vue js guide.