仅打开在 Vue 循环中单击的（动态创建的）下拉菜单

Question

您好，我已经动态创建了下拉菜单，我可以使用 v-Show 正确显示它们，问题是我无法单击以显示单击的元素，但它们都在我的代码下方打开

<div :class="{inizio : utenteAttivo.nome === contatti.nome}" class="conversazione px-5 pt-4 overflow-scroll">
<div style="line-height: .5rem;" :class="{ricevuto : item.stato === 'inviato'}" class="messaggi pt-3 pb-2 px-3 my-3" v-for="(item, index) in conversazione" :key="index">
<!-- <button @click="deleteMessaggio(index)">Elimina</button> -->

<div v-on:click="show = !show" id="drop_elimina">
  <i class="fas fa-chevron-down"></i>
</div>

<div id="drop" v-if="show">
  <div>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action py-3">Info messaggio</a>
      <a href="#" @click="deleteMessaggio(index)" class="list-group-item list-group-item-action py-3">Elimina messaggio</a>
    </div>
  </div>
</div>

<span style="margin-right: 5rem;" class="d-block">{{item.testo}}</span>
<span class="d-block text-end">{{item.ora}} <i :class="{blue : index + 1 != conversazione.length }" v-if="item.stato === 'inviato'" class="fas fa-check-double spunte"></i></span>
<div :class="{visibile : item.stato === 'ricevuto'}" class="indicatore">
  <i class="fas fa-caret-down"></i>
</div>
<div :class="{visibile : item.stato === 'inviato'}" class="indicatore_inviato">
  <i class="fas fa-caret-down"></i>
</div>

在javascript中我设置了显示

显示：假，

使用此点击代码，它们都打开了我无法设置允许您仅打开被点击的条件

Answer 1

在 v-for 循环中，您应该使用循环中元素的索引，并检查元素索引是否等于单击的元素，而不是使用布尔值来表示 show：

 <div v-on:click="show = show === index ? null : index" id="drop_elimina">
   <i class="fas fa-chevron-down"></i>
 </div>

<div id="drop" v-if="show === index">
  <div>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action py-3">Info messaggio</a>
      <a href="#" @click="deleteMessaggio(index)" class="list-group-item list-group-item-action py-3">Elimina messaggio</a>
    </div>
   </div>
 </div>