title: JavaScript methods and child elements in Vue.js
body: <p>Vue.js is my first reactive library and I'm having trouble with methods and child elements. I suspect I'm missing something obvious.</p>
  
  <p>In my example, the rendered listitems have method handlers for hover (mouseenter &amp; mouseleave) events. Each listitem is a parent of a <code>&lt;video&gt;</code> element, paused by default. When the mouse enters a listitem, its child <code>&lt;video&gt;</code> plays (elem.play()). The video pauses when the mouse leaves the listitem.</p>
  
  <p>Full example: <a href="https://jsfiddle.net/matbergman/hcgtkbwt/8/" rel="nofollow">https://jsfiddle.net/matbergman/hcgtkbwt/8/</a></p>
  
  <pre><code>&lt;ul class="contentList"&gt;
      &lt;li v-for="item in items" v-on:mouseover="videoPlay()" v-on:mouseleave="videoPause()"&gt;
      &lt;video loop="loop" v-bind:src="item.video"&gt;&lt;/video&gt;
      &lt;p&gt;
      {{item.description}}
      &lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script&gt;
  
  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();
          }        
      }  
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>My method recognizes the mouse events. How do I apply the play() method to the child <code>&lt;video&gt;</code>? In jQuery it would be something like:</p>
  
  <pre><code>$("li").mouseenter(function() {
      this.getElementsByTagName("video")[0].play();
  });
  </code></pre>
  
  <p>But the scope of <code>this</code> is of course defined by my $el variable instead of the element with the attached event like I'm used to. Would the play() method be passed somehow as a property of a component?</p>