uniapp中多个v-for内部如何设置弹窗并关闭

在 UniApp 中，如果你要在多个 `v-for` 循环渲染的数据中设置弹窗（比如使用 `uni-popup`），你可以为每个循环项设置一个独立的弹窗实例，然后提供相应的关闭操作。下面是一个基本的例子：

<template>
  <view>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <text>{{ item.title }}</text>
        <!-- 创建一个ref绑定到当前元素 -->
        <uni-popup ref="popup{{ index }}" v-model="popupVisible[index]" title="关于 {{ item.title }}">
          <text>这是关于 {{ item.title }} 的详细信息</text>
        </uni-popup>
        <!-- 每个弹窗有自己的显示和关闭开关 -->
        <button @click="closePopup(index)">关闭{{ item.title }}的弹窗</button>
      </li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' }
      ],
      // 初始化所有弹窗为关闭状态
      popupVisible: Array.from({ length: this.items.length }, () => false),
    };
  },
  methods: {
    closePopup(index) {
      this.popupVisible[index] = false;
    }
  }
};
</script>

在这个例子中，我们为每个列表项创建了一个单独的`uni-popup`实例，通过`ref`绑定到元素，同时给每个弹窗设置了对应的`v-model`值`popupVisible[index]`来控制其显示。当点击关闭按钮时，会调用`closePopup(index)`方法，传入对应索引关闭相应弹窗。