Javascript 在一个组件中动态显示下拉列表
我希望在一个组件中有多个下拉列表,使用一个变量显示或不显示,并从其div中单击以关闭它们:Javascript 在一个组件中动态显示下拉列表,javascript,vue.js,Javascript,Vue.js,我希望在一个组件中有多个下拉列表,使用一个变量显示或不显示,并从其div中单击以关闭它们: 内容 //同一组件中的第二个下拉列表 内容 data(){ 返回{ 伊索彭:错 } }, 观察:{ 等参元(等参元){ if(等参线){ document.addEventListener('click',this.closeIfClickedOutside) } } }, 方法:{ 关闭如果单击外侧(事件){ 如果(!event.target.closest('.dropdown')){ this.
内容
//同一组件中的第二个下拉列表
内容
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;
}
}
}
};