My goal is to trigger my notification function from another JS file, but I keep getting an undefined error.
The code snippet for the notification function in notification.js is as follows:
function notification(message, level = 'success') {
Lobibox.notify(level, {
delayIndicator: false,
msg: message
});
}
In addToCart.vue, I have the following code:
<template>
<div>
<button class="button dark small" @click="addToCart(menu, price)">
<i class="fa fa-cutlery fa-lg m-right-5"></i>
Pilih Menu
</button>
</div>
</template>
<script>
export default{
props: ['menu', 'price'],
methods:{
addToCart(menu, price){
const currentPoint = $('#current_point').val();
if(price > currentPoint){
return notification('Point is not enough', 'error')
}
}
}
}
</script>
In app.js, the Vue component is added and initialized:
Vue.component('addtocart', require('./components/AddToCart.vue'));
new Vue({
el: '#app'
});
The script tags to include the necessary files in html are shown below:
<script src="{{ asset('js/notification.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
However, every time price > currentPoint condition is met, I encounter the error:
Uncaught ReferenceError: notification is not definedI am using LaravelMix for compilation. Any suggestions on how to resolve this issue?