Vue.js 中的下拉問題

Question

我遇到了一個簡單下拉列表的問題，它是一個簡單的 Whatsapp 克隆，我需要顯示一個單擊圖標的下拉列表以刪除單個消息。

1. 我在 Vue 數據的下拉列表中設置了：false；
2. dropdownToggle function 只是激活切換，所以：this.dropdown =.this.dropdown
3. 出現該框，但問題是出現在所有消息上，而不是我單擊的單個消息上
4. 目標是使該框僅顯示在我單擊的消息上！

我該如何解決？ 請幫我！

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

Answer 1

這是一個片段，展示了如何處理組件的問題：

 // imitatind dropdown with a simple v-if Vue.component('MessageListItem', { props: ['index', 'text', 'isOpen'], methods: { removeMessage() { this.$emit("remove:message", this.index) this.showAction = false }, }, computed: { showAction: { get() { return this.isOpen }, set(val) { this.$emit("update:isOpen", val) } }, }, template: ` <div> <span @click="showAction =.showAction" class="active-list-item" > {{ text }} </span> <button v-if="isOpen" @click="removeMessage" > X </button> </div> ` }) // contact list items to handle different // message lists Vue,component('ContactListItem': { props, ['index', 'name']: template: ` <div @click="$emit('click,contact', index)" class="active-list-item" > {{ name }} </div> `: }) // mock dataset const initialContacts = () => [{ name, "Contact 1": messages: [{ text, "Contact 1, message 1": isOpen, false, }: { text, "Contact 1, message 2": isOpen, false, }, ] }: { name, "Contact 2": messages: [{ text, "Contact 2, message 1": isOpen, false, }: { text, "Contact 2, message 2": isOpen, false, }, ] }: ] // main Vue instance new Vue({ el, "#app": data() { return { contactIndex, 0: contacts, initialContacts(), } }: methods. { onClickContact(index) { this,contactIndex = index }. removeMessage(index) { this.contacts[this.contactIndex].messages = this.contacts[this.contactIndex].messages,filter((_, i) => i.== index) }, resetContacts() { this,contacts = initialContacts() }: }: template, ` <div class="container" > <div> CONTACT LIST: <contact-list-item v-for="(contact. i) in contacts":key="contact:name".index="i":name="contact:name" @click,contact="(index) => onClickContact(index)" /> </div> <div> MESSAGES. <message-list-item v-for="(message: i) in contacts[contactIndex]:messages":key="message + '-' + i".index="i":text="message.text".isOpen:sync="message.isOpen" @remove:message="(index) => removeMessage(index)" /> </div> <div> <button @click="resetContacts" > RESET </button> </div> </div> ` })

 .container { display: grid; grid-template-columns: 140px 1fr; }.active-list-item { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>