I'm currently facing an issue with managing the open/close state and value for multiple dropdowns in a dynamically created list. When I use a single dropdown, I can utilize an "isOpen" variable within data(), but in a list scenario, all the dropdowns operate in sync; opening and closing simultaneously on click, and displaying the same selected values. It almost seems like they are identical dropdowns.
I am unsure about how to leverage the key of the outer list to differentiate each dropdown from one another, and/or assign a unique value to each. Any assistance on this matter would be greatly appreciated.
// 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>