Hey, I'm having an issue with my dynamically created drop-down menus. I can display them correctly using v-Show, but the problem is that when I click on one element, 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>
I have set show to false in JavaScript.
show: false,
When I click on any element, they all open up. I am trying to figure out how to make it so only the clicked element opens.