Why do v-show and v-if react immediately to logical changes in objects, but not in arrays?
This strange behavior occurred while developing a dynamic FAQ page where the answer is displayed after clicking a question.
When the boolean that controls the opening / closing of the response is stored in an object, the view is updated instantly and the response is shown or hidden instantly. However, when stored in a list, the answer is not shown or hidden until the view is refreshed in some other way.
Here's a script showing the issue https://jsfiddle.net/masterofginseng/ffqt9n4y/6/
Html
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="faq">
<div>This responds immediately</div>
<hr>
<div v-for="questionObj in questions1">
<div style="cursor: pointer;" @click="questionObj.open = !questionObj.open">
{{ questionObj.question }}
</div>
<div style="color: blue;" v-show="questionObj.open">{{ questionObj.answer }}</div>
</div>
<br>
<br>
<div>This doesn't respond until the view is updated in some other way (ex. by clicking on one of the questions above)</div>
<hr>
<div v-for="questionarray in questions2">
<div style="cursor: pointer;" @click="questionarray[2] = !questionarray[2]">
{{ questionarray[0] }}
</div>
<div style="color: blue;" v-show="questionarray[2]">{{ questionarray[1] }}</div>
</div>
</div>
And the javascript:
new Vue({
el: "#faq",
data: {
questions1: [{
question: "How big is it?",
answer: "very big",
open: false
}, {
question: "How small is it?",
answer: "very small",
open: false
}],
questions2: [
["How big is it?", "very big", false],
["How small is it?", "very small", false]
]
}
});
source to share
Due to a limitation in Javascript, Vue cannot detect value changes in elements with this syntax:
questionarray[2] = !questionarray[2]
See it here: https://vuejs.org/v2/guide/list.html#Array-Change-Detection
As explained in the link above, you should instead use splice()
:
questionarray.splice(2, 1, !questionarray[2])
source to share
This is due to display caveats
Try it like this:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="faq">
<div>This responds immediately</div>
<hr>
<div v-for="questionObj in questions1">
<div style="cursor: pointer;" @click="questionObj.open = !questionObj.open">
{{ questionObj.question }}
</div>
<div style="color: blue;" v-show="questionObj.open">{{ questionObj.answer }}</div>
</div>
<br>
<br>
<div>This doesn't respond until the view is updated in some other way (ex. by clicking on one of the questions above)</div>
<hr>
<div v-for="questionarray in questions2">
<div style="cursor: pointer;" @click="myMethod(questionarray)">
{{ questionarray[0] }}
</div>
<div style="color: blue;" v-show="questionarray[2]">{{ questionarray[1] }}</div>
</div>
</div>
Script
new Vue({
el: "#faq",
data: {
questions1: [{
question: "How big is it?",
answer: "very big",
open: false
}, {
question: "How small is it?",
answer: "very small",
open: false
}],
questions2: [
["How big is it?", "very big", false],
["How small is it?", "very small", false]
]
},
methods:{
myMethod(questionArray){
this.$set(questionArray, 2, !questionArray[2]);
}
}
});
Here is a jsFiddle
Or a less detailed version, as Linus Borg answered:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="faq">
<div>This responds immediately</div>
<hr>
<div v-for="questionObj in questions1">
<div style="cursor: pointer;" @click="questionObj.open = !questionObj.open">
{{ questionObj.question }}
</div>
<div style="color: blue;" v-show="questionObj.open">{{ questionObj.answer }}</div>
</div>
<br>
<br>
<div>This doesn't respond until the view is updated in some other way (ex. by clicking on one of the questions above)</div>
<hr>
<div v-for="questionarray in questions2">
<div style="cursor: pointer;" @click="questionarray.splice(2, 1, !questionarray[2])">
{{ questionarray[0] }}
</div>
<div style="color: blue;" v-show="questionarray[2]">{{ questionarray[1] }}</div>
</div>
</div>
source to share