vue v-if 无法访问数组中的布尔值

Question

我用以下数据创建了一个vue组件：

data: function () {
return {
hwshow: [false, false, false, false, false, false, false, false, false, false],
};
},

以及切换这些值的方法：

methods: {
fliphw: function (index) {
this.hwshow[index] = !this.hwshow[index];
console.log(this.hwshow);
},
},

在html中我有

<li v-show="hwshow[0]">foo bar</li>

我知道flipw函数正在被调用(因为console.log(，但当hwshow[0]的值为true时，foo-bar仍然没有出现。当我切换到使用布尔值，而不是布尔值数组时，它就起作用了。为什么？如果我不能访问布尔值数组，可能还有什么其他解决方案？

Answer 1

为什么DOM没有更新？，这是一个常见的问题：

当您通过直接设置索引(例如arr[0](来修改数组时=val(或修改其长度属性。同样，Vue.js无法拾取这些变化。总是使用Array实例方法修改数组，或者完全替换它。

为了克服这一限制，触发反应性系统中的状态更新，您可以使用Vue.set

new Vue({
el: '#app',
data: function () {
return {
hwshow: [false, false, false, false, false, false, false, false, false, false],
};
},
methods: {
fliphw: function (index) {
this.$set(this.hwshow, index, !this.hwshow[index])
},
},
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
<span @click="fliphw(0)">click to flip</span>

<div>
{{ hwshow }}
</div>

<ul>
<li v-show="hwshow[0]">foo bar</li>
</ul>
</div>