Below is the set of external javascript functions that I’m calling from a vue.js instance
// debounce
function debounce(func, wait, immediate) {
let timeout;
return function() {
let context = this, args = arguments;
later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// — end debounce
// animate css
function animateCss(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add(‘animated’, animationName)
function handleAnimationEnd() {
node.classList.remove(‘animated’, animationName)
node.removeEventListener(‘animationend’, handleAnimationEnd)
if (typeof callback === ‘function’) callback()
}
node.addEventListener(‘animationend’, handleAnimationEnd);
}
// — end animate css
and my vue.js instance
new Vue({
el : ‘#app’,
template : ‘#search-tpl’,
methods : {
onKeyDown : debounce(function(){
animateCss(‘#searchboxui-wrapper’, ‘fadeOutDown’,function(){
document.querySelector(‘#searchboxui-wrapper’).style.display = ‘none’;
});
}
}
})
but it always throws me undefined, even if I declare the axios package or socketio package, it throws me undefined, any help, ideas please?
PS: I’m using vue.js CLI 3
Solution :
Create external js file, say externals.js, use import to import everything or specific functions from this file and use them in the vue.js code:
Content in externals.js:
// debounce
function debounce(func, wait, immediate) {
let timeout;
return function() {
let context = this, args = arguments;
later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// — end debounce
// animate css
function animateCss(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add(‘animated’, animationName)
function handleAnimationEnd() {
node.classList.remove(‘animated’, animationName)
node.removeEventListener(‘animationend’, handleAnimationEnd)
if (typeof callback === ‘function’) callback()
}
node.addEventListener(‘animationend’, handleAnimationEnd);
}
// — end animate css
export {debounce, animateCss}
Content in VueJS:
import {debounce, animateCss} from ‘../../js/externals.js’
new Vue({
el : ‘#app’,
template : ‘#search-tpl’,
methods : {
onKeyDown(){
debounce(function(){
animateCss(‘#searchboxui-wrapper’, ‘fadeOutDown’,function(){
document.querySelector(‘#searchboxui-wrapper’).style.display = ‘none’;
});
});
}
}
})