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

Question

I'm trying to handle the open/close state and value for multiple dropdowns in a dynamically generated list. With a single dropdown, an "isOpen" variable in data() works but in a list, all the dropdowns (predictably) open and close with the same click and their selected values are the same. i.e. it's as if they are all the same dropdown.

I'm not sure how to use the key of the outside list to distinguish all the dropdowns from each other and / or to make sure they all have a unique value associated with them. Any help would be awesome.

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

Jake Lam · Accepted Answer · 2020-05-21 05:37:15Z

the reason is the ways you declare making isOpen belongs to mainList.vue, but it should belongs to each dropdown and independent across the components.

The best practice is you need to create another Vue component call Dropdown and move all logic to there

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>

Please remember to move all related data/methods from mainList to Dropdown.vue (such as isOpen, selectedLocation, .....)

Then in mainlist.vue, you just need to call it out

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

Now each Dropdown should use independent isOpen and not depends on each other

Kirankumar · Accepted Answer · 2020-05-21 05:33:03Z

0

I think you have to gave isOpen as unique for all click. that's way you can manage all dropdowns

Like.. isOpen[index] or else you know

answered May 21, 2020 at 5:33

Kirankumar

314 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related