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

Question

我尝试使用视点并将值传递到我的航路点，它向我发送此消息：未捕获错误：没有元素选项传递给航路点构造函数，我得到了这样的代码：

在我看来 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>

知道我做错了什么

Answer 1

对于单文件组件，你需要实际导出一个Vue组件。所以你的脚本应该看起来像这样：

<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>

这会将模板安装在 DOM 和然后您的 Waypoint 脚本将运行.

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

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

jquery

vue.js

viewpoint