I've got an issue with a simple dropdown, it's a simple Whatsapp clone and I need to show a dropdown clicking on the icon to delete the single message.
- I've set in Vue data's dropdown: false;
- dropdownToggle function just active the toggle so : this.dropdown = !this.dropdown
- the box appears, but the problem is that appears on all the messages and not the single one I've clicked
- The goal is make the box appear just on the message I've clicked!
How can I solve that? Please help me!
<div :class="(darkMode == false) ? 'chat-box' : 'dark-chat'">
<div class="container">
<div class="messages" v-for="message,index in contacts[contactIndex].messages">
<p class="message" :class="message.status" @click="dropdownToggle">
{{ message.text }}
<i class="fas fa-chevron-down">
</i>
<span class="dropdown-size"
:class="(dropdown == false) ? 'dropdown-content' : 'dropdown-show'">
<a href="#">Delete Message</a>
</span>
<span class="message-date">{{ message.date }}</span>
</p>
</div>
</div>
</div>
<!-- /chat box -->
contacts[contactIndex].messages
to store a state, or create a reusable VueJS component for message, which will handle its own dropdown state.