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

Question

Hi I have dynamically created drop down menus and I can correctly show them using v-Show, the problem is that I cannot click to show the single clicked element, but they all open below my code

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

in javascript I set show

show: false,

with this click code they all open I can not set a condition that allows you to open only the clicked

Igor Moraru · Accepted Answer · 2021-05-23 15:40:57Z

4

Instead of using a boolean for show, in a v-for loop you should use the index of the element in the loop and check if the element index equals to the one clicked:

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

edited May 23, 2021 at 15:40

answered May 23, 2021 at 15:33

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emanuele Over a year ago

Thank you very much it works perfectly, now I will try to close the drop even with a click outside

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related