After a user clicks the login button in my navigation, a modal box pops up. However, once the user logs in, the modal box does not disappear.
How can I hide or remove the modal box when users click on the login button?
This code snippet is from Home.vue:
<div id="myModal1" class="modal centered-modal" role="dialog">
<div class="modal-dialog login_dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">
<i class="fa_icon form_close"></i>
</button>
<div class="modal-body">
<div class="ms_register_img">
<img src="images/register_img.png" alt="" class="img-fluid" />
</div>
<div class="ms_register_form">
<h2>Log In</h2>
<form @submit.prevent="submit">
<div class="form-group">
<input type="email" placeholder="Enter Your Email" class="form-control" v-model="form.email">
<span class="form_icon">
<i class="fa_icon form-envelope" aria-hidden="true"></i>
</span>
</div>
<div class="form-group">
<input type="password" placeholder="Enter Your Password" class="form-control" v-model="form.password">
<span class="form_icon">
<i class="fa_icon form-lock" aria-hidden="true"></i>
</span>
</div>
<div class="form-group">
<button class="reg_ms_btn" type="submit">Log In</button>
</div>
</form>
<div class="remember_checkbox">
<label>Keep me signed in
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="popup_forgot">>
<a href="#">Forgot Password?</a>
</div>
<p>Don't Have An Account? <a href="#myModal" data-toggle="modal" class="ms_modal1 hideCurrentModel">Register here</a></p>
</div>
</div>
</div>
</div>
</div>