用vue.js使用航點的問題

Question

我正在使用vue.js，我想包括waypoints。

我的原創，工作，腳本：

HTML：

<div id="final"> 
    <h2>Mostar el mensaje al pasar por aqui</h2> 
</div> 

腳本：

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); 
    } 
}); 

CSS：

.muestra { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
} 

我想使用此代碼在vue.js中，但它給了我在控制檯消息：

Uncaught ReferenceError: Waypoint is not defined

這是vue.js代碼：

galeri.vue：

<template> 
    <div id="final"> 
    <h2>Mostar el mensaje al pasar por aqui</h2> 
    </div> 
</template> 
<script> 
    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

既然你通過npm install waypoints安裝航點，你需要require它在你的文件中像這樣：

<script> 
require('waypoints/lib/noframework.waypoints.js') 

var waypoint = new Waypoint({ 
    // ... 
}) 
</script> 

Found on the waypoints Github.