[我想在VUE js中单击按钮时显示模态框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[我想在VUE js中单击按钮时显示模态框相关的知识,希望对你有一定的参考价值。
我已经使用bootstrap和VUE js创建了代码。当我单击按钮时,弹出窗口不显示。我使用了VUE js组件。我希望我的输出看起来像https://prnt.sc/pkhrff,但是现在我单击按钮时什么也没发生。我的代码在这里查看!
html:
<div class="register-wrap" id="register-wrap">
<div class="container">
<h2>Online registration for Vue Training</h2>
<div class="line"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-12">
<div class="registerbtn">
<h3>Register Now Today!</h3>
<modalregister v-if="showModal" @close= "showModal = false">
<p>Enter your text here</p>
</modalregister>
<input type="submit" @click = "showModal = true" class="form-control" value="Register Now">
</div>
</div>
</div>
</div>
</div>
VUE js:
Vue.component('modalregister',
template:`
<!-- Modal -->
<div class="modal fade">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<slot></slot>
</div>
<button class="close" type="button" data-dismiss="modal" @click="$emit('close')"></button>
</div>
</div>
</div>
`
);
new Vue(
el:'#register-wrap',
data:
showModal: false
);
答案
您可以查找页面源代码以查看是否渲染了组件。
您的模态默认为隐藏。您可以更改以下内容:
<div class="modal fade">
收件人
<div class="modal fade show">
以上是关于[我想在VUE js中单击按钮时显示模态框的主要内容,如果未能解决你的问题,请参考以下文章