techinplanet staffAsked By: Anonymous
As the title implies I want to add two modal dialog’s on one page.
I figured out how to create on but the second one I am having troubles with.
HTML:
<body>_x000D_
<h1>-projects-</h1>_x000D_
<ul id="button-container">_x000D_
<li>_x000D_
<a id="html-modal-button" @click="showModal = true">_x000D_
<img class="htmllogo" src="images/HTMLLogo.png">_x000D_
<div class="html-text-block">_x000D_
<h2>HTML</h2>_x000D_
<p>My web projects</p>_x000D_
</div>_x000D_
</a>_x000D_
<htmlmodal v-if="showModal" @close="showModal = false"></htmlmodal>_x000D_
</li>_x000D_
_x000D_
<li>_x000D_
<a id="cs-modal-button" @click="showModal = true">_x000D_
<img class="csharplogo" src="images/CSHARPLogo.png">_x000D_
<div class="cs-text-block">_x000D_
<h2>C#</h2>_x000D_
<p>My windows projects</p>_x000D_
</div>_x000D_
</a>_x000D_
<csmodal v-if="showModal" @close="showModal = false"></csmodal>_x000D_
</li>_x000D_
</ul>_x000D_
_x000D_
<!-- MODAL SECTION -->_x000D_
<script type="text/x-template" id="html-modal-template">_x000D_
<transition name="html-modal">_x000D_
<div class="modal-mask">_x000D_
<div class="modal-wrapper">_x000D_
<div class="modal-container">_x000D_
<div class="modal-header">_x000D_
<slot name="header">HTML HEADER</slot>_x000D_
</div>_x000D_
<div class="modal-body">_x000D_
<slot name="body">HTML BODY</slot>_x000D_
</div>_x000D_
<div class="modal-footer">_x000D_
<slot name="footer">HTML FOOTER_x000D_
<button class="modal-default-button" @click="$emit('close')">OK</button>_x000D_
</slot>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</transition>_x000D_
</script>_x000D_
_x000D_
<script type="text/x-template" id="cs-modal-template">_x000D_
<transition name="cs-modal">_x000D_
<div class="modal-mask">_x000D_
<div class="modal-wrapper">_x000D_
<div class="modal-container">_x000D_
<div class="modal-header">_x000D_
<slot name="header">CS HEAD</slot>_x000D_
</div>_x000D_
<div class="modal-body">_x000D_
<slot name="body">CS BODY</slot>_x000D_
</div>_x000D_
<div class="modal-footer">_x000D_
<slot name="footer">CS FOOTER_x000D_
<button class="modal-default-button" @click="$emit('close')">OK</button>_x000D_
</slot>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</transition>_x000D_
</script>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>_x000D_
_x000D_
x000D
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
}
})
});
**The Fiddle: ** https://jsfiddle.net/oz053uzj/
As you can see I have separated the modal section, so essentially I could simply create and edit a modal, create a vue.component and reference it.
The problem comes when I try to open the modal, it seem’s to only open the second or last modal for each of the buttons, I presume its due to @click="showModal = <>" is same for both the modals, but I’m left clueless..
Solution
Answered By: Anonymous
because their v-if is based on the same data showModal.
If showModal is true, both will be displayed. And the last one will be on top.
So how about differentiating them based on a string instead of true/false ?
<a id="html-modal-button" @click="showModal = 'html-modal'">
and
<htmlmodal v-if="showModal === 'html-modal'" ...
?
