Изменить модальное окно

Question

У меня есть 2 модальных окна: зарегистрироваться и войти. Когда я нажимаю кнопку «Зарегистрироваться», модальное окно должно измениться. Что мне делать?

Это ссылка на проект.

https://jsfiddle.net/Alienwave/0kqj7tr1/4/

Vue.component('signup', {
    template: '#signup-template'
})

Vue.component('login', {
    template: '#login-template',
    data() {
        return {
            loginInput: '',
            passwordInput: ''
        }
    },

    methods: {
        sendRequest(e) {
                    //code not here
        },

        changeModal() {
                        // THIS!!
        }
    }
});

new Vue({
    el: "#app",
    data() {
        return {
        showLogin: true,
            showSignup: false
        }
        }
        });

Это шаблон входа:

<template id="login-template">
        <transition name="modal">
            <div class="login-mask">
                <div class="login-wrapper">
                    <div class="login-container">
                        <div class="login-footer">
                            <slot name="footer">
                                <div class="change-mode">
                                    <button class="change-mode-reg" @click="">Sign up</button> <!-- THIS BUTTON SHOULD CHANGE MODAL! -->
                                </div>
                            </slot>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </template>

ЗарегистрироватьсяШаблон выглядит так же. Я разрезал большой кусок.

Answer 1

Это хороший пример использования пользовательских событий Vue . Я бы обновил ваш код следующим образом:

# login-template

...

<div class="login-footer">
  <slot name="footer">
    <div class="change-mode">
      <button class="change-mode-reg" @click="changeModal">Sign up</button>
      <div class="change-mode-line"></div>
    </div>
  </slot>
</div>

...

компонент входа

Vue.component('login', {
  template: '#login-template',
  data() {
    return {
      loginInput: '',
      passwordInput: ''
    }
  },
  methods: {
    sendRequest(e) {
      //code not here
    },
    changeModal() {
      this.$emit('change');
    }
  }
});

# app

<div id="app">
  <login v-if="showLogin" @close="showLogin = false" @change="changeModal"></login>
  <signup v-if="showSignup" @close="showSignup = false"></signup>
</div>

Вот обновленная скрипка .

( ПРИМЕЧАНИЕ : похоже, вы могли бы иметьнекоторые другие проблемы, происходящие здесь, но это исправляет вашу проблему переключения мод.)