Javascript 为什么v-show和v-if会立即响应对象中的布尔更改,而不是数组中的布尔更改?
在开发一个动态FAQ页面时遇到了这种奇怪的行为,在该页面上单击问题后会显示答案 当控制答案打开/关闭的布尔值存储在对象中时,视图立即更新,答案立即显示或隐藏。但是,当答案存储在列表中时,在以其他方式更新视图之前,答案不会显示或隐藏 这里有一把小提琴显示了这个问题 HTMLJavascript 为什么v-show和v-if会立即响应对象中的布尔更改,而不是数组中的布尔更改?,javascript,vue.js,frontend,vuejs2,Javascript,Vue.js,Frontend,Vuejs2,在开发一个动态FAQ页面时遇到了这种奇怪的行为,在该页面上单击问题后会显示答案 当控制答案打开/关闭的布尔值存储在对象中时,视图立即更新,答案立即显示或隐藏。但是,当答案存储在列表中时,在以其他方式更新视图之前,答案不会显示或隐藏 这里有一把小提琴显示了这个问题 HTML <script src="https://npmcdn.com/vue/dist/vue.js"></script> <div id="faq"> <div>This res
<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>
由于Javascript的限制,Vue无法检测具有以下语法的项目中的值的更改:
questionarray[2] = !questionarray[2]
请看这里:
如上面链接中所述,您必须使用splice()
:
questionarray.splice(2, 1, !questionarray[2])
这是因为
试着这样做:
<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>
这是你的电话号码
或者像Linus borg回答的那样,用一个不太详细的版本:
<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>
这会立即作出反应
{{questionObj.question}
{{questionObj.answer}
在视图以其他方式更新之前(例如,单击上面的一个问题),这不会响应
{{questionarray[0]}
{{questionarray[1]}
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]);
}
}
});
<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>