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

嗨，我已经动态创建了下拉菜单，我可以使用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>

{{item.testo}
{{item.ora}}

在javascript中，我设置了show

秀:假,

---

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

，而不是使用布尔值for

show

，在v-for循环中，您应该使用循环中元素的索引，并检查元素索引是否等于点击的索引：

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

---

非常感谢，它工作得非常完美，现在我将尝试关闭该下拉列表，即使只需在外部单击一下