Sha*_*yer 2 html javascript vue.js
正如标题所暗示的，我想在一页上添加两个模态对话框。我想出了如何创建，但第二个我遇到了麻烦。
HTML：
<body>
<h1>-projects-</h1>
<ul id="button-container">
<li>
<a id="html-modal-button" @click="showModal = true">
<img class="htmllogo" src="images/HTMLLogo.png">
<div class="html-text-block">
<h2>HTML</h2>
<p>My web projects</p>
</div>
</a>
<htmlmodal v-if="showModal" @close="showModal = false"></htmlmodal>
</li>
<li>
<a id="cs-modal-button" @click="showModal = true">
<img class="csharplogo" src="images/CSHARPLogo.png">
<div class="cs-text-block">
<h2>C#</h2>
<p>My windows projects</p>
</div>
</a>
<csmodal v-if="showModal" @close="showModal = false"></csmodal>
</li>
</ul>
<!-- MODAL SECTION -->
<script type="text/x-template" id="html-modal-template">
<transition name="html-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">HTML HEADER</slot>
</div>
<div class="modal-body">
<slot name="body">HTML BODY</slot>
</div>
<div class="modal-footer">
<slot name="footer">HTML FOOTER
<button class="modal-default-button" @click="$emit('close')">OK</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<script type="text/x-template" id="cs-modal-template">
<transition name="cs-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">CS HEAD</slot>
</div>
<div class="modal-body">
<slot name="body">CS BODY</slot>
</div>
<div class="modal-footer">
<slot name="footer">CS FOOTER
<button class="modal-default-button" @click="$emit('close')">OK</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
</body>
</html>VUE.JS：
$(window).load(function(){
// CREATE THE DOM COMPONENT
Vue.component('htmlmodal', {
template: '#html-modal-template',
});
Vue.component('csmodal', {
template: '#cs-modal-template',
});
// START THE APP
new Vue({
el:'#button-container',
data: {
showModal: false
}
})
});
**小提琴：** https://jsfiddle.net/oz053uzj/
正如你所看到的，我已经分离了模态部分，所以基本上我可以简单地创建和编辑一个模态，创建一个vue.component并引用它。
当我尝试打开模态时，问题出现了，似乎只为每个按钮打开第二个或最后一个模态，我认为@click="showModal = <>"这两个模态的原因是相同的，但我一无所知..
因为它们v-if是基于相同的数据showModal。
如果showModal为 true，则两者都将显示。最后一个将在上面。
那么如何根据字符串而不是 true/false 来区分它们呢？
<a id="html-modal-button" @click="showModal = 'html-modal'">
和
<htmlmodal v-if="showModal === 'html-modal'" ...
?
演示：https : //jsfiddle.net/jacobgoh101/oz053uzj/1/