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

Question

我正在尝试处理动态生成列表中多个下拉列表的 open/close 状态和值。对于单个下拉菜单，data() 中的 "isOpen" 变量有效，但在列表中，所有下拉菜单（可以预见）通过相同的单击打开和关闭，并且它们选择的值相同。也就是说，好像它们都是相同的下拉列表。

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

// 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>

Answer 1

我认为您必须将 isOpen 设置为对所有点击都是唯一的。这样您就可以管理所有下拉菜单

喜欢.. isOpen[index] 否则你知道

Answer 2

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

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

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>

请记得把所有相关的data/methods从mainList移到Dropdown.vue（比如isOpen,selectedLocation,.....）

那么在mainlist.vue,中你只需要调用

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

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

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

VueJS -- handle dropdown state in dynamically generated list of dropdowns

javascript

drop-down-menu

vue.js