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）或修改其length属性。同样，Vue.js无法提取这些变化。始终使用Array实例方法修改数组，或完全替换它。

要克服此限制，可以在反应性系统中触发状态更新，可以使用Vue.set

[[0,0,0]]

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])
    },
  },
})

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

1 个答案: