Vue2中v-for内v-if点击后无法动态更新的问题及解决

在Vue2项目中，尝试通过v-for循环内的@click事件控制v-if与v-else的显示切换，但v-if并未如预期随点击动态更新。注：people数据来自store文件，确认已完全加载。

相关代码 #

HTML部分

<div v-for="(person, index) in people" :key="index">
  <div @click="detailsOpened(index)">
    <PersonIcon v-if="showDetails(index)" />
    <PersonIcon2 v-else />
  </div>
</div>

JavaScript部分

import { each } from 'lodash-es'

export default {
  data() {
    return {
      personMap: []
    }
  },
  beforeMount() {
    this.personMap = each(people, () => false)
  },
  methods: {
    showDetails(index) {
      return this.personMap[index] === true
    },
    detailsOpened(index) {
      this.personMap[index] = !this.personMap[index]
    }
  }
}

排查情况 #

通过console.log排查发现：detailsOpened方法执行正常，对应索引的布尔值会随点击正确改变，但v-if仅在页面首次渲染时执行，personMap值变化后视图未动态更新，showDetails方法仅在页面加载初期运行。

最终解决方案 #

• 将personMap数据及相关方法迁移至Pinia store文件中
• 在store的detailsOpened方法中使用Vue.set更新数组项，确保Vue能检测到数组变化
• 初始化personMap时，对people使用lodash的cloneDeep进行深克隆

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