1

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.

  1. I've set in Vue data's dropdown: false;
  2. dropdownToggle function just active the toggle so : this.dropdown = !this.dropdown
  3. the box appears, but the problem is that appears on all the messages and not the single one I've clicked
  4. 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 -->
1
  • You need to store the dropdown state of each message individually, otherwise you're simply writing them to a single state in the component, which explains why all your messages receive the same state. You can either manipulate contacts[contactIndex].messages to store a state, or create a reusable VueJS component for message, which will handle its own dropdown state.
    – Terry
    May 25, 2021 at 11:40

1 Answer 1

0

Here's a snippet to show how to handle the problem with components:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.