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

Question

我想在一个组件中有多个下拉列表，使用一个变量来显示或不显示，并点击远离它们的 div 以关闭它们:

<div class="dropdown">
  <button @click.prevent="isOpen = !isOpen"></button>
    <div v-show="isOpen">Content</div>
</div>
// second dropdown in same component
<div class="dropdown">
  <button @click.prevent="isOpen = !isOpen"></button>
    <div v-show="isOpen">Content</div>
</div>

data() {
  return {
    isOpen: false
  }
},
watch: {
  isOpen(isOpen) {
    if(isOpen) {
      document.addEventListener('click', this.closeIfClickedOutside)
    }
  }
},
methods: {
  closeIfClickedOutside(event){
    if(! event.target.closest('.dropdown')){
      this.isOpen = false;
    }
  }
}

但是现在当我单击一个下拉菜单时，它会同时显示它们。我对 vue 有点陌生，找不到解决这个问题的方法

Answer 1

要为此仅使用一个变量，该变量需要确定哪个下拉列表是打开的，因此它不能是 bool 值。我建议将索引(例如，一个数字)存储在变量中，并有条件地通过索引呈现选定的下拉列表:

声明一个数据属性来存储所选索引:

export default {
  data() {
    return {
      selectedIndex: null
    }
  }
}

更新 closeIfClickedOutside()清除选定的索引，从而关闭下拉列表:

export default {
  methods: {
    closeIfClickedOutside() {
      this.selectedIndex = null
    }
  }
}

在模板中，更新 click -handlers 设置选定的索引:

<button @click.stop="selectedIndex = 1">Open 1</button>
<button @click.stop="selectedIndex = 2">Open 2</button>

另外，更新 v-show基于索引呈现的条件:

<div v-show="selectedIndex === 1">Content 1</div>
<div v-show="selectedIndex === 2">Content 2</div>

另外，不要使用 watcher 来安装 click -处理程序在 document因为我们想知道渲染这个组件时的外部点击。在 mounted 中添加处理程序会更合适钩，然后在 beforeDestroy 中取出钩:

export default {
  mounted() {
    document.addEventListener('click', this.closeIfClickedOutside)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.closeIfClickedOutside)
  },
}

demo