时间戳

首页 > 解决方案 > VueJS——在动态生成的下拉列表中处理下拉状态

javascript - VueJS——在动态生成的下拉列表中处理下拉状态

问题描述

我正在尝试处理动态生成列表中多个下拉列表的打开/关闭状态和值。使用单个下拉菜单，“isOpen”变量data()有效，但在列表中，所有下拉菜单（可预测）通过相同的单击打开和关闭，并且它们的选择值相同。即好像它们都是相同的下拉菜单。

我不确定如何使用外部列表的键来区分所有下拉列表和/或确保它们都具有与之关联的唯一值。任何帮助都是极好的。 

// main list
<div
  class="main-list"
  v-for="(item, index) in list"
  :key="index"
>
  <div class="list-item">
    <h1>Item Title</h1>
    <p>Description</p>

    // dropdown for this item in above v-for
    <div
      @click="isOpen = !isOpen"
      :class="{ 'is-open': isOpen }"
      class="dropdown-wrap"
      :key="index"
    >
      <div class="dropdown-title">
        {{ selectedLocation ? selectedLocation.location_name : "Select Location" }}
      </div>
      <ul class="locations-list">
        <li
          class="location"
          v-for="(item, index) in locations"
          :key="index"
          @click="setLocation(item)"
        >
          <a
            class="location-link"
            :aria-label="item.location_name"
          >
            {{ item.location_name }}
          </a>
        </li>
      </ul>
    </div>


  </div>
</div>

标签： javascriptvue.jsdrop-down-menu

解决方案

原因是您声明制作的方式isOpen属于 mainList.vue，但它应该属于每个下拉列表并且独立于组件。

最佳实践是您需要创建另一个 Vue 组件调用 Dropdown 并将所有逻辑移到那里

下拉菜单.vue

<template>
 <div class="list-item">
    <h1>Item Title</h1>
    <p>Description</p>

    // dropdown for this item in above v-for
    <div
      @click="isOpen = !isOpen"
      :class="{ 'is-open': isOpen }"
      class="dropdown-wrap"
      :key="index"
    >
      <div class="dropdown-title">
        {{ selectedLocation ? selectedLocation.location_name : "Select Location" }}
      </div>
      <ul class="locations-list">
        <li
          class="location"
          v-for="(item, index) in locations"
          :key="index"
          @click="setLocation(item)"
        >
          <a
            class="location-link"
            :aria-label="item.location_name"
          >
            {{ item.location_name }}
          </a>
        </li>
      </ul>
    </div>


  </div>
</template>

请记住将所有相关数据/方法从 mainList 移动到 Dropdown.vue 中（例如 isOpen、selectedLocation ......）

然后在mainlist.vue 中，你只需要调用它

<div
  class="main-list"
  v-for="(item, index) in list"
  :key="index"
>
 <drop-down />
</div>

现在每个Dropdown应该使用独立isOpen而不是相互依赖

推荐阅读