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

  drop-down-menu, javascript, vue.js

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>

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

Source: Ask Javascript Questions

LEAVE A COMMENT