arrays - 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

为什么 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>