js中双层嵌套循环下如何关闭uni-popup弹出组件

在JavaScript中，特别是在Vue.js框架中使用uni-popup弹出组件时，如果你在一个双层嵌套循环中想要控制某个popup的显示和隐藏，通常会通过在数据结构中维护一个开关状态数组或者对象来管理每个popup的状态。这里有一个基本的示例：

假设你有这样一个列表数据`items`，每个item都有一个对应的popup需要展示：

data() {
  return {
    items: [
      { id: 1, showPopup: false },
      { id: 2, showPopup: true },
      { id: 3, showPopup: false }
      //...
    ]
  };
},

然后在模板中，你可以遍历这个数组并根据`showPopup`字段来控制popup的打开：

<template>
  <div v-for="(item, index) in items" :key="index">
    <button @click="togglePopup(item.id)">
      Item {{ item.id }}
      <uni-popup v-if="item.showPopup" @close="hidePopup(item.id)">内容</uni-popup>
    </button>
  </div>
</template>

<script>
methods: {
  togglePopup(id) {
    this.items.find(item => item.id === id).showPopup = !this.items.find(item => item.id === id).showPopup;
  },
  hidePopup(id) {
    this.items.forEach(item => {
      if (item.id === id) {
        item.showPopup = false;
      }
    });
  },
}
</script>

在这个例子中，`togglePopup`函数会切换对应id项的popup显示状态，而`hidePopup`则会在点击外部区域或关闭按钮时隐藏所有处于打开状态的popup。