vue.js Uncaught Error: No element option passed to Waypoint constructor

Question

I try to use viewpoint and I Pass the values to my waypoint it send my this message: Uncaught Error: No element option passed to Waypoint constructor,I got my code like this:

in my view galeri.vue :

<template>
      <div class="play-top" id="final">
      <iframe src="xxxxxxxxx" allowfullscreen autoplay="false"></iframe>
    </div>
</template>


<script>
    require('waypoints/lib/jquery.waypoints.min.js')
    var ele
    var waypoint = new Waypoint({
      element: ele = document.getElementById('final'),
      handler: function(direction) {
        if (direction == 'down') {
          $(ele).addClass('muestra')
        } else {
          $(ele).removeClass('muestra')
        }
        console.log(direction);
      }
    });
<script>

any idea what I am doing wrong

Answer 1

With single file components, you need to actually export a Vue component. So your script should instead look something like this:

<script>
  require('waypoints/lib/jquery.waypoints.min.js')
  export default {
    mounted(){
      var ele
      new Waypoint({
        element: ele = document.getElementById('final'),
        handler: function(direction) {
          if (direction == 'down') {
            $(ele).addClass('muestra')
          } else {
            $(ele).removeClass('muestra')
          }
          console.log(direction);
        }
      });
    }
  }
<script>

This will mount the template in the DOM and then your Waypoint script will run.