v-show不符合预期：点击按钮后shows数组变更但视图未更新

DevOps 小满

2026-5-25

问题分析与解决方案

这是Vue 2里很常见的数组响应式更新限制问题，我来帮你搞定它：

问题根源

Vue 2的响应式系统没法检测到通过索引直接修改数组元素的操作（比如你写的this.shows[old] = false）。虽然调试工具里能看到数组数据确实变了，但这种修改方式不会触发Vue的视图更新机制，所以页面上的内容自然不会跟着刷新。

可行解决方案

下面几种方法都能修复这个问题，选你顺手的用就行：

方法一：用`this.$set`触发响应式更新

修改你的watch逻辑，用Vue实例内置的$set方法来更新数组元素：

watch:{
  currentShow: function (val, old) {
    this.$set(this.shows, old, false);
    this.$set(this.shows, val, true);
  }
}

$set会主动告诉Vue：“我改了这个数组的元素，麻烦更新下视图”，这样就能触发响应式更新了。

方法二：使用数组变异方法`splice`

splice属于Vue能自动检测到的数组变异方法，用它修改元素也会触发视图更新：

watch:{
  currentShow: function (val, old) {
    this.shows.splice(old, 1, false);
    this.shows.splice(val, 1, true);
  }
}

这里用splice从指定索引位置替换元素，把旧索引对应的值改成false，新索引对应的值改成true。

方法三：直接替换整个数组

你也可以创建一个新数组，修改后重新赋值给shows——Vue能检测到数组的重新赋值操作：

watch:{
  currentShow: function (val, old) {
    // 复制原数组到新数组
    const updatedShows = [...this.shows];
    updatedShows[old] = false;
    updatedShows[val] = true;
    // 重新赋值触发更新
    this.shows = updatedShows;
  }
}