I have created an authService mixin to call my api as logged-in user (using its token).
import ModalLogin from '@/components';
export default {
components: {
ModalLogin
},
data: function () {
return {
}
},
methods: {
authorizedGet(url) {
if(!localStorage.getItem('user')) {
ModalLogin.methods.show()
} else {
// ...
}
}
}
}
In that mixin, if user is not authenticated, I'd like to open my modal login form from a component (define as a global component).
But, when it tries to do "show()", I get:
ModalLogin is not defined
EDIT:
Here is my ModalLogin component:
<template>
<!--Form modal-->
<!-- ... -->
</template>
<script>
import User from '../models/user';
export default {
name: "modalLogin",
data() {
return {
user: new User('', ''),
loading: false,
message: ''
};
},
methods: {
handleLogin() {
this.loading = true;
this.$validator.validateAll().then(isValid => {
if (!isValid) {
this.loading = false;
return;
}
if (this.user.username && this.user.password) {
this.$store.dispatch('auth/login', this.user).then(
() => {
this.$router.push('/profile');
},
error => {
this.loading = false;
this.message =
(error.response && error.response.data) ||
error.message ||
error.toString();
}
);
}
});
},
showModal() {
this.$refs['login-modal'].show()
}
}
}
</script>
<style>
</style>
...which is defined as Global as of more components:
// ...
import ModalLogin from '@/components/ModalLogin.vue';
// ...
/**
* You can register global components here and use them as a plugin in your main Vue instance
*/
const GlobalComponents = {
install(Vue) {
// ...
Vue.component(ModalLogin.name, ModalLogin);
// ...
}
};
export default GlobalComponents;