仅打开在 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

不使用布尔值 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>

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

Open only the (dynamically created) dropdown menu clicked in Vue loop

javascript

drop-down-menu

vue.js