Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

89
Visualizações
Open global modal from mixin

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;

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda