0

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>
Jan
  • 1,180
  • 3
  • 23
  • 60
  • How do I do this and why does `handleSubmitError` works then? – Jan Oct 01 '20 at 19:32
  • Here it is also working like I have implemented it: https://codepen.io/CodinCat/pen/LWRVGQ?editors=1010 – Jan Oct 01 '20 at 19:36
  • Here you can also see that it works globally without defining it for every component: https://vuejs.org/v2/guide/mixins.html#Global-Mixin – Jan Oct 01 '20 at 19:39

0 Answers0