I am using Vue.js with global functions which I have definied under Vue mixin
. In my component I call different functions from this Vue mixin
. However, whenever I try to call checkUser
which only contains a console.log(...)
line nothing happens. Not even the line gets printed in the console.
But I am wondering, why other functions of this mixin
, e.g. handleSubmit
get called and executed without any problems at all from the same component. Even in the same function.... I even tried to rename the function, doesn't work.. It's also not a cache problem because other changes on the mixin
work and I refresh the app.js
file in my browser and can see the changes...
My goal is to check if the user is logged in and if not to show an error message. So, the checkUser
function needs to be called before the axios
request is being made and the axios
request needs to wait till the checkUser
function has returned either true
or false
. I know that I need a if-statement
for that, however, first I would like to figure out why my function is now getting called...?
Here is my sourcecode. If you need more let me know... app.js
require('./bootstrap');
import Vue from 'vue';
export const EventBus = new Vue();
Vue.component('products-list-view', require('./components/ProductListView.vue').default);
//Vue mixin
Vue.mixin({
methods: {
handleSubmitError(error){
if(error.response.status == 403){
// Show not logged in modal
//EventBus.$emit('user-not-logged-in-show-modal');
}else if(error.response.status != 422){
window.toastr.error('Es gab einen Fehler', 'Es gab einen ungewöhnlichen Fehler, bitte probiere es später noch einmal!');
}
},
formatPrice(value, decimals){
let val = (value/1).toFixed(decimals).replace('.', ',');
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
},
checkUser(user){
console.log('TEST??!!')
}
}
});
window.app = new Vue({
el: '#app'
});
Component
<template>
<div @click="toogleProductMark">
<p>Toogle Product Mark</p>
</div>
</template>
<script>
export default {
name: "ProductListView",
methods: {
toogleProductMark(){
this.checkUser(true); // <-- WHY is this line not getting executed?
if(this.product.isMarkedAuthUser){
axios.post(this.product.actions.unmark.route, {value: 1})
.then((r) => {
this.product.isMarkedAuthUser = false;
}).catch((e) => {
this.handleSubmitError(e); // <-- BUT this does?
});
}else if(!this.product.isMarkedAuthUser){
axios.post(this.product.actions.mark.route, {value: 1})
.then((r) => {
this.product.isMarkedAuthUser = true;
}).catch((e) => {
this.handleSubmitError(e); // <-- AND this as well?
});
}
}
}
}
</script>