Vue中v-for嵌套v-if仅显示数组最后一个元素问题求助

嗨，兄弟，这问题我之前刚踩过类似的坑！咱们先理清楚问题根源：

当你把模态框放在v-for循环外面的时候，循环结束后row变量会停留在最后一个遍历的元素上——所以模态框里的{{row.id}}自然就显示最后一个元素的ID了。而你把row作为参数传入函数时，是点击瞬间把当前循环的row传进去，属于实时绑定，所以函数能正常拿到正确的元素。

下面给你两种实用的解决方案，按需选择：

方案一：将模态框嵌入v-for循环内部 #

这种方式简单直接，每个表格行对应一个模态框，确保模态框的作用域和当前row绑定：

<tr v-for="row in rows" :key="row.id">
  <td>
    <button @click="toggleModal">打开模态框</button>
    <!-- 模态框放在循环内，作用域属于当前row -->
    <div class="modal" v-if="isModalOpen">
      选中的ID：{{ row.id }}
    </div>
  </td>
</tr>

⚠️ 注意：这种方式会渲染多个模态框，数据量较大时可能略有性能损耗，但逻辑简单，适合小数据场景。

方案二：用全局变量存储当前选中的row（推荐） #

这种方式只渲染一个模态框，性能更优，也是实际项目中最常用的写法：

<template>
  <table>
    <tr v-for="row in rows" :key="row.id">
      <td>
        <button @click="openModal(row)">打开模态框</button>
      </td>
    </tr>
  </table>

  <!-- 模态框放在循环外，使用全局存储的选中row -->
  <div class="modal" v-if="selectedRow">
    选中的ID：{{ selectedRow.id }}
    <!-- 其他需要展示的row属性也可以通过selectedRow访问 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [], // 你的数组数据
      selectedRow: null, // 存储当前选中的行数据
      // 可选：如果需要单独控制模态框显示隐藏
      // isModalOpen: false
    };
  },
  methods: {
    openModal(row) {
      this.selectedRow = row;
      // this.isModalOpen = true;
    }
  }
};
</script>

这种方式的核心是把点击时的row赋值给一个全局响应式变量，模态框直接绑定这个变量，完美避开作用域覆盖的问题。

另外提醒下：记得给v-for加上:key="row.id"，这是Vue的最佳实践，能避免很多渲染异常问题哦～

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