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>

我知道正在调用 fliphw 函数（因为 console.log），但是当 hwshow[0] 的值为 true 时 foo bar 仍然没有出现。当我切换到使用布尔值而不是布尔值数组时，它可以工作。为什么？如果我无法访问布尔数组，还有什么其他解决方案可以解决这个问题？

Answer 1

Why isn't the DOM updating?，这是一个常见的陷阱：

当您通过直接设置索引来修改数组时（例如 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>