嵌套v-for列表中v-if与v-else不生效问题求助

从你的描述和代码来看，嵌套v-for下修改对象属性无法更新视图，大概率和Vue2的响应式机制、循环的作用域/key设置有关，下面逐一拆解原因并给出解决办法：

可能的核心原因 #

1. Vue2的响应式限制：新增属性未被追踪

Vue2无法自动检测对象新增属性的变化。如果你的loading属性是在文件上传后才添加到comment对象中的，Vue不会将这个属性转为响应式，因此修改它不会触发视图更新。而comment.response能正常工作，是因为这个属性在adminComments初始化时就已经存在，属于天生的响应式属性。

2. 嵌套v-for缺少唯一key，导致DOM复用

你的代码里没有给v-for设置:key属性，Vue在更新列表时会复用DOM节点。如果没有唯一标识区分每个节点，尤其是嵌套循环的场景下，很容易出现视图不更新的情况——Vue以为节点不需要变化，就跳过了更新逻辑。

3. 内层v-for的遍历目标可能存在逻辑问题

从代码看，内层v-for="(answer, index) in comment"是直接遍历comment对象（而非comment下的某个子数组），这会遍历comment的所有可枚举属性。如果这不是你的预期逻辑，会导致循环层级混乱，进而干扰Vue对comment属性变化的追踪。

针对性解决方案 #

1. 用this.$set处理新增/修改属性的响应式问题

如果是新增loading属性，或者修改原本不存在的属性，必须用Vue提供的this.$set方法，确保属性被转为响应式：

uploadFile(event, parentIndex) {
  const targetComment = this.adminComments[parentIndex];
  // 修改已有属性（如果name初始化时存在，直接赋值即可；如果是新增，同样用$set）
  targetComment.name = event.target.files[0].name;
  // 新增/修改loading属性，用$set确保响应式
  this.$set(targetComment, 'loading', true);
}

2. 给所有v-for添加唯一key

给外层和内层循环都加上:key，优先使用数据的唯一标识（比如comment.id），如果没有可用的唯一id，再用索引（注意：索引在数组排序/删除时可能引发问题，尽量用业务唯一id）：

<div class="media" v-for="(comment, parentIndex) in adminComments" :key="comment.id || parentIndex">
  <div class="media-body">
    <!-- 假设内层应该遍历comment下的子数组，比如comment.answers，根据你的实际结构调整 -->
    <div class="media" v-for="(answer, index) in comment.answers" :key="answer.id || index">
      <label class="control-label upload" v-if="comment.data === ''">
        <input class="file-upload" type="file" @change="uploadFile($event, parentIndex)"> Upload file
      </label>
      <label class="control-label upload" v-else>
        <input class="file-upload" type="file" @change="uploadFile($event, parentIndex)"> {{comment.name}}
      </label>
    </div>
  </div>
</div>

3. 修正内层v-for的遍历逻辑

如果你的adminComments结构是每个comment包含一个子数组（比如用户的回复列表），那么内层v-for应该遍历这个子数组，而不是comment对象本身。调整后，循环层级更清晰，也能避免不必要的DOM渲染干扰。

4. 确认修改的是正确的comment引用

在uploadFile函数中，确保通过parentIndex拿到的是adminComments数组中对应的comment对象引用，避免因为引用错误导致属性修改无效。

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