javascript - vue 无法显示第二种模态形式

Question

当我单击每个按钮时，我有一个表单两个按钮，它应该打开自己的表单并关闭主表单，但它仅适用于 HTML 代码中较高的表单在此处输入图像描述 我点击时有一个表单两个按钮每个按钮都应该打开自己的表单并关闭主表单，但它仅适用于 HTML 代码中较高的表单[在此处输入图像描述

代码：

<div class="login">
        <div class="login-button"><a @click="open_login_window = !open_login_window"><div class="login-img"></div></a></div>
        <transition name="fade">
         <div class="login-window" v-if="open_login_window">
          <div class="buttons">
           <button class="btn header-btn btn-log" @click="open_sign_window = !open_sign_window, open_login_window = !open_login_window">вход</button>
           <button class="btn header-btn btn-reg" @click="open_reg_window = !open_reg_window, open_login_window = !open_login_window">регистрация</button> 
          </div>
          <div class="icons">
           <div class="icon"><div class="icon_1"><a href=""></a></div></div>
           <div class="icon"><div class="icon_2"><a href=""></a></div></div>
           <div class="icon"><div class="icon_3"><a href=""></a></div></div>
           <div class="icon"><div class="icon_4"><a href=""></a></div></div>
          </div>
         </div>
         <transition name="fade">
          <div class="sign-window"  v-click-outside="close_sign_window" v-if="open_sign_window">
           <form action="">
            <h3>вход</h3>
            <input type="text" placeholder="email..."><input type="text" placeholder="пароль...">
            <a>забыли пароль?</a>
            <div class="icons">
             <div class="icon"><div class="icon_1"><a href=""></a></div></div>
             <div class="icon"><div class="icon_2"><a href=""></a></div></div>
             <div class="icon"><div class="icon_3"><a href=""></a></div></div>
             <div class="icon"><div class="icon_4"><a href=""></a></div></div>
            </div> 
            <button class="btn header-btn btn-log">войти</button>
           </form>
          </div>
         </transition>
         <transition name="fade">
          <div class="reg-window" v-click-outside="close_reg_window" v-if="open_reg_window">
           <form action="">
             <h3>регистрация</h3>
             <input type="text" placeholder="email..."><input type="text" placeholder="пароль...">
             <div class="check-block">
              <h4>Ваша роль на сайте</h4>
              <div class="input-box">
               <label class="checkbox">Пользователь
                <input type="checkbox">
                <span class="mark"></span>
               </label>
               <label class="checkbox">Участник
                <input type="checkbox">
                <span class="mark"></span>
               </label>
               <label class="checkbox">Компания
                <input type="checkbox">
                <span class="mark"></span>
               </label>
               <div class="select-block">
                <label class="checkbox">
                 <span class="mark"></span>
                 <input type="checkbox">
                 Принять <ins>пользовательское соглашение</ins>
                </label>
                <label class="checkbox">
                 <span class="mark"></span>
                 <input type="checkbox">
                 Принять <br> <ins>политику конфиденциальности</ins>
                </label>
               </div>
              </div>
             <button class="btn header-btn btn-reg">регистрация</button> 
             </div>
           </form>
          </div>
         </transition>
        </transition>
       </div>

JavaScript

<script>
import ClickOutside from 'vue-click-outside'
export default {
  name: 'Header',
  data () {

    return {
     open_education_list: false,
     open_work_list: false,
     open_housing_list: false,
     open_rest_list: false,
     open_login_window: false,
     open_mob_menu: false,
     open_login_window: false,
     open_reg_window: false,
     open_sign_window: false,
    }
  },
   methods: {
    close_reg_window(){
     this.open_reg_window = false,
     this.open_login_window = true
    },
    open_mob_menu(){
     this.open_education_list = false,
     this.open_work_list = false,
     this.open_housing_list = false,
     this.open_rest_list = false
    },
    close_sign_window(){
     this.open_sign_window = false,
     this.open_login_window = true
    }
  },
  directives: {
    ClickOutside
  }
}
</script>

如果我删除其中一个表格，将显示另一个

标签： javascripthtmlvue.js