i created two components , one is Sidebar.vue ,the another one is Login.vue.
i tried to click the button on the sidebar and then it asked to pop up a modal dialog, but when i clicked it ,it doesn’t work

i use a boolean variables ‘open’ and use v-if to judge whether “open” is true or false, if open=true,then use component

here is my code:

sidebar.vue:

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible theme="light" width="300px">
      <div class="logo" style="display: flex">
        <img src="@/assets/logo.png" />
      </div>
      <div class="ant_button">
        <a-button v-if="!isLogin" type="primary" size="large" block @click="showModal">Sign In</a-button>
        <a-button v-else >profile</a-button>
      </div>

      <!---loginModal-->
      <login-modal v-if="open"></login-modal>


      <div class="ant_button">
        <a-button type="default" size="large" block>+ New Thread</a-button>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
        <a-menu-item key="1" class="menu-item">
          <pie-chart-outlined />
          <span>首页</span>
        </a-menu-item>

        <a-menu-item key="2" class="menu-item">
          <desktop-outlined />
          <span>历史</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- Header
      <a-layout-header></a-layout-header> !-->
      <a-layout-content style="margin: 16px 16px">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          Bill is a cat.
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  components: {
    loginModal: () => import('@/views/user/login.vue')
  },
  props:['isLogin'],
  data(){
    return {
      isLoading:false,
      collapsed :false,
      selectedKeys :[],
      open:false,
    }
  },
  methods:{
    showModal(){
      this.open=true;
    },
  }
}
</script>
<style>
.logo{
  height: 40px;
  margin:16px;
}
.ant_button{
  padding:10px 15px 10px 15px;
  margin-bottom: 10px;
}
.menu-item{
  height: 45px;
  font-size: 20px;
}

</style>

login.vue:

<template>
  <a-modal open=true title="Login"  ok-text="Log In" @ok="doLogin" :confirm-loading="isLoading" >
  <a-form
      ref="loginForm"
      :model="form"
      name="basic"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
  >
    <a-form-item
        name="username"
        :rules="[{ required: true, message: 'username' }]"
    >
      <a-input v-model:value="form.username" />
    </a-form-item>
    <a-form-item
        name="password"
        :rules="[{ required: true, message: 'password' }]"
    >
      <a-input-password v-model:value="form.password" />
    </a-form-item>
  </a-form>
  </a-modal>
</template>
<script>
  export default {
    data(){
      return {
        form:{
          username:'',
          password:''
        },
        isLoading:false,
        visible:true
      }
    },
    methods:{
      doLogin(){
        this.isLoading=true;
        setTimeout(()=>{
          //this.openModal=false;
          this.isLoading=false;
        },20000);
      },
    }
  }
</script>
<style >
</style>