Vue v-for循环内单列表项条件渲染视图不更新问题咨询

问题原因 #

你遇到的是Vue2的响应式特性限制：Vue2只会对初始化时就在data中声明的属性，以及通过$set方法新增的属性做响应式劫持。你从后端拉取到项目数据后，直接遍历给每个project对象手动追加的showTags属性没有被加入响应式系统，所以修改该属性时不会触发视图更新。

你之前通过切换isLoading强制列表重渲染的方案能生效，是因为切换时整个列表组件被销毁重建，重建时读取了修改后的showTags值，属于绕过响应式的hack方案，不建议长期使用。

解决办法 #

方案1（推荐）：给数组赋值前预先补全属性 #

拉取到后端数据后，先给每个项目对象补全showTags属性，再整体赋值给响应式变量projects，Vue会在赋值时自动把所有属性转为响应式：

async getAllProjects() {
  try {
    this.isLoading = true;
    const res = await fetch(store.state.urlEndpoints.getProjects, {
      ...AuthPost(), // request config object
    });
    // 先处理原始数据，补全属性
    const rawProjects = JSON.parse(await res.text());
    this.projects = rawProjects.map(project => ({
      ...project,
      showTags: false
    }));
    this.isLoading = false;
  } catch (err) {
    this.isError = true;
    this.isLoading = false;
  }
}

方案2：使用$set添加响应式属性 #

如果不想修改数据赋值逻辑，也可以在追加属性时调用Vue提供的$set方法，主动将新增属性加入响应式系统：

this.projects.forEach((project, index) => {
  this.$set(this.projects[index], 'showTags', false)
})

修改完成后，你最开始用v-if或者b-collapse的代码都可以正常运行，无需额外的强制重渲染逻辑。

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