I’m using v-if to control the display of pages in my vue.js app. the ‘page’ data property keeps track of the current page and is updated by button clicks. This works beautifully until I introduce modals, as now when I open a modal and navigate back a couple of pages (using my app’s navigation buttons) the page fails to display despite the property being updated correctly.
Here’s a simplified example - navigate to page B then C then display Modal 2. Cancel Modal 2, then navigate to Page B and nothing displays (despite the header indicating that the page property is B).
https://jsfiddle.net/fLmq0dxn/1/
I’ve tried this approach with both bootstrap modals and native js modals but the same problem occurs. No errors reported in the console. I thought it might be wrongly nested divs but I’ve checked these and put it through a validator.
I realise that my navigation methods are primitive and that the modals probably should be components, but I’m a newbie to Vue, and as far as I understand it my approach ‘should’ work. Can anyone explain why it doesn’t please?
HTML:
<div id=”app”>
<p>(app.page = {page})</p>
<br/>
<div class=”page” id=”A” v-if=”page==’A’”>
Page A
<br/>
<button v-on:click=”pager(‘B’)”>To B</button>
</div>
<div class=”page” id=”B” v-if=”page==’B’”>
Page B
<br/>
<button v-on:click=”pager(‘C’)”>To C</button>
<button v-on:click=”modalOpen(‘mod1’)”>Modal</button>
</div>
<!– ************ Modal 1 ************************************ –>
<div id=”mod1” class=”mod”>
<div class=”mod-content”>
<span class=”mod-close” v-on:click=”modalClose”>×</span>
<h1>Modal 1</h1>
<button v-on:click=”modalClose” class=”btn btn-secondary”>Cancel</button>
</div>
</div>
<div class=”page” id=”C” v-if=”page==’C’”>
Page C
<br/>
<button v-on:click=”pager(‘B’)”>To B</button>
<button v-on:click=”modalOpen(‘mod2’)”>Modal</button>
</div>
<!– ************ Modal 2 ************************************ –>
<div id=”mod2” class=”mod”>
<div class=”mod-content”>
<span class=”mod-close” v-on:click=”modalClose”>×</span>
<h1>Modal 2</h1>
<button v-on:click=”modalClose” class=”btn btn-secondary”>Cancel</button>
</div>
</div>
</div>
CSS:
/* The Modal (background) */
.mod {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.mod-content {
background-color: #fefefe;
margin: 20% auto;
padding: 20px;
border: 1px solid #888;
border-radius:8px;
width: 90%;
max-width:800px;
}
/* The Close Button */
.mod-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.mod-close:hover,
.mod-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Javascript:
new Vue({
el: “#app”,
data: {
page: “A”
},
methods: {
pager: function(target){
this.page=target;
},
modalOpen: function(modID) {
$(‘#’+ modID).css(‘display’,’block’);
},
modalClose: function(){
$(‘.mod’).css(‘display’,’none’);
}
}
})
Solution :
Combining vue.js with jQuery is risky unfortunately.
In the specific case, it seems like when you try closing the modal, jQuery looks for all elements with “mod” class, but when hiding them, the selection is tampered by vue.js and you end up with incorrect elements being hidden (in the case, the content of the page B). vue.js is not designed to have another library fiddling with the DOM.
You can “easily” achieve the goal using vue.js only. Since you manage the modal by changing their style, you can do something similar with vue.js class and/or style binding.
E.g. you could have a class that overrides the display: none, and you conditionally apply that class based on a data, very similarly as you do for the pages. And you could even probably manage the modal with v-if, exactly like you did with the pages.
Example with conditional class: https://jsfiddle.net/jfx8mbya/
Example with modal managed by v-if:
new Vue({
el: “#app”,
data: {
page: “A”,
modal: null
},
methods: {
pager: function(target) {
this.page = target;
},
modalOpen: function(modID) {
this.modal = modID;
},
modalClose: function() {
this.modal = null;
}
}
})
/* The Modal (background) */
.mod {
/*display: none;*/
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.mod-content {
background-color: #fefefe;
margin: 20% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 8px;
width: 90%;
max-width: 800px;
}
/* The Close Button */
.mod-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.mod-close:hover,
.mod-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”>
<p>(app.page = {page})</p>
<br/>
<div class=”page” id=”A” v-if=”page==’A’”>
Page A
<br/>
<button v-on:click=”pager(‘B’)”>To B</button>
</div>
<div class=”page” id=”B” v-if=”page==’B’”>
Page B
<br/>
<button v-on:click=”pager(‘C’)”>To C</button>
<button v-on:click=”modalOpen(‘mod1’)”>Modal</button>
</div>
<!– ************ Modal 1 ************************************ –>
<div id=”mod1” class=”mod” v-if=”modal === ‘mod1’”>
<div class=”mod-content”>
<span class=”mod-close” v-on:click=”modalClose”>×</span>
<h1>Modal 1</h1>
<button v-on:click=”modalClose” class=”btn btn-secondary”>Cancel</button>
</div>
</div>
<div class=”page” id=”C” v-if=”page==’C’”>
Page C
<br/>
<button v-on:click=”pager(‘B’)”>To B</button>
<button v-on:click=”modalOpen(‘mod2’)”>Modal</button>
</div>
<!– ************ Modal 2 ************************************ –>
<div id=”mod2” class=”mod” v-if=”modal === ‘mod2’”>
<div class=”mod-content”>
<span class=”mod-close” v-on:click=”modalClose”>×</span>
<h1>Modal 2</h1>
<button v-on:click=”modalClose” class=”btn btn-secondary”>Cancel</button>
</div>
</div>
</div>