Vue循环中v-show使用异常问题及异步场景下状态数组构建方案咨询

首先，你的核心问题出在Vue 2对数组响应式更新的限制上，而非v-show在循环中使用的问题。

为什么点击切换不生效？ #

Vue 2无法检测到数组通过索引直接赋值的变化（比如show[i] = !show[i]这种操作）——这是JavaScript本身的限制导致的，Vue没法追踪这类数组修改行为，所以你的点击事件虽然执行了，但视图并不会同步更新。

解决办法 #

你可以用Vue提供的this.$set（全局的Vue.set也可）方法来修改数组元素，这样就能触发响应式更新：

修改点击事件的逻辑：

@click="$set(show, i, !show[i])"

正确初始化show数组的时机 #

因为你的objects数组是异步加载的，最佳时机是在获取到objects数据之后，再创建对应长度的show数组，避免索引越界或长度不匹配的问题：

// 假设你在异步请求回调里获取数据
async fetchData() {
  // 模拟接口请求获取业务数据
  const fetchedObjects = await yourApiRequest();
  this.objects = fetchedObjects;
  // 创建与objects长度一致的布尔数组，默认值为false
  this.show = Array(fetchedObjects.length).fill(false);
}

修改后的完整可运行示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.js"></script>
<div id="app">
  <div v-for="(object, i) in objects" :key="i">
    <h3>Hi there {{ object.name }} show status is {{ show[i] }}</h3>
    <div class="demo" @click="$set(show, i, !show[i])">Click me</div>
    <div v-show="show[i]">Show or hide me</div>
  </div>
</div>

<script>
const app = new Vue({ 
  el: '#app', 
  data: { 
    objects: [], 
    show: [] 
  }, 
  methods: {
    fetchData() {
      // 模拟异步加载数据的过程
      setTimeout(() => {
        this.objects = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
        this.show = Array(this.objects.length).fill(false);
      }, 1000);
    }
  },
  mounted() {
    this.fetchData();
  }
});
</script>

<style>
.demo{ width: 100px; height: 30px; background-color: green; margin: 10px; }
</style>

补充说明 #

• v-show在循环中使用本身完全没问题，它和v-if的核心差异你理解的没错：v-show只是切换元素的display属性，元素始终存在于DOM中；v-if则是动态添加/移除DOM节点，你的场景用v-show完全适配。
• 你不想给原业务对象添加show属性的思路很合理，把UI状态和业务数据分开维护，能避免不必要的业务数据污染。

内容的提问来源于stack exchange，提问作者goodson