Javascript 在一个组件中动态显示下拉列表

我希望在一个组件中有多个下拉列表，使用一个变量显示或不显示，并从其div中单击以关闭它们：

内容
//同一组件中的第二个下拉列表
内容

data（）{
返回{
伊索彭：错
}
},
观察：{
等参元（等参元）{
if（等参线）{
document.addEventListener（'click'，this.closeIfClickedOutside）
}
}
},
方法：{
关闭如果单击外侧（事件）{
如果（！event.target.closest（'.dropdown'））{
this.isOpen=false；
}
}
}

---

但现在，当我点击一个下拉菜单时，它会同时显示这两个菜单。我对vue有点陌生，找不到解决这个问题的方法。要使用一个变量，这个变量需要识别哪个下拉列表是打开的，所以它不能是布尔值。我建议将索引（例如，一个数字）存储在变量中，并根据索引有条件地呈现所选下拉列表：

声明用于存储选定索引的数据属性：

导出默认值{
数据（）{
返回{
selectedIndex:null
}
}
}

更新

CloseIf ClickedOutside（）

以清除所选索引，从而关闭下拉列表：

导出默认值{
方法：{
closeIfClickedOutside（）{
this.selectedIndex=null
}
}
}

在模板中，更新

单击
-处理程序以设置所选索引：

open1
开放2

另外，根据索引更新要渲染的

v-show

条件：

内容1
内容2

另外，不要使用观察者在

文档

上安装

点击

-处理程序，因为我们想知道呈现此组件时外部点击的情况。在

挂载的

钩子中添加处理程序，然后在

销毁前

钩子中删除处理程序更合适：

导出默认值{
安装的（）{
document.addEventListener（'click'，this.closeIfClickedOutside）
},
在…之前{
document.removeEventListener（'click'，this.closeIfClickedOutside）
},
}

---

制作一个数组并在其中循环，这样做更容易

<template>     
<div id="app">
        <div class="dropdown" v-for="(drop, index) in dropData" :key="index">
      <button @click="openDropdown(index);">{{ drop.title }}</button>
        <div v-show="isOpen === index">{{ drop.content }}</div>
    </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isOpen: null,
          dropData: [
            {
              title: "Hey",
              content: "Hey it's content 1"
            },
              {
              title: "Hey 2",
              content: "Hey it's content 2"
            },
              {
              title: "Hey 3",
              content: "Hey it's content 3"
            },
          ]
        };
      },
     
    methods: {
        openDropdown(idx){
         if (this.isOpen === idx) {
              this.isOpen = null;
            } else {
            this.isOpen = idx;
            }
    
        }
    
    }
    };
    </script>

{{drop.title}}
{{drop.content}}
导出默认值{
数据（）{
返回{
等参：空，
dropData：[
{
标题：“嘿”，
内容：“嘿，这是内容1”
},
{
标题：“嘿2”，
内容：“嘿，这是内容2”
},
{
标题：“嘿3”，
内容：“嘿，这是内容3”
},
]
};
},
方法：{
openDropdown（idx）{
if（this.isOpen==idx）{
this.isOpen=null；
}否则{
this.isOpen=idx；
}
}
}
};