0

ModalsComponent is being global to all my cards

This how I am calling CardComponent:

<CardComponent
        v-for="card of cards"
        :key="card.urlsId"
        :cardImages="card.images"
        :cardTitle="card.title"
        :cardDescription="card.description"
        :mediaRef="card.urlsId"
        :dbRef="card.dbId"
        :deleteBtn="true"
        :imagesWithSlider="true"
        :deleteModalOpen="deleteModalOpen"
        @onOpenDeleteModal="
          ;(deleteModalOpen = true), (newCardModalOpen = false)
        "
        @onCloseDeleteModal="deleteModalOpen = false"
      />

And this is how my CardComponent looks like:

<template>
  <div class="cards">
    <ModalsComponent
      v-if="deleteModalOpen"
      :deleteModal="true"
      @closeModal="$emit('onCloseDeleteModal')"
      @onDeleteCard="log"
    />
    <v-card class="card-container">
      <div class="delete-btn">
        <v-btn
          v-if="deleteBtn"
          class="mx-2"
          fab
          dark
          small
          @click="
            $emit('onOpenDeleteModal'), (deletingCardRefs = { dbRef, mediaRef })
          "
        >
          <v-icon dark> mdi-delete </v-icon>
        </v-btn>
      </div>
      <ImageSlider
        v-if="imagesWithSlider"
        :imagesArray="cardImages"
        :arrowBtns="false"
      />
      <v-img v-else></v-img>
      <div class="text-container">
        <h3 class="card-title">{{ cardTitle }}</h3>
        <p class="card-description">{{ cardDescription }}</p>
      </div>
    </v-card>
  </div>
</template>

in CardComponent it is being looped after v-card element and my ModalsComponent being global to all my cards how to target it each of my cards separately?

Rustam Ravshanovich
  • 96
  • 8
  • Hi, code screenshots are not allowed here, please replace them with some actual text. Then, your props are supposed to be kebab-case'd like `:card-title="card.title"`, please follow the conventions there. From what you're sharing, the flow looks okay but it's also hard to tell because we cannot inspect the thing on our side. Try to see if the modal is properly targeting each component and not being global to all of them. Using the Vue devtools will be the best thing here because you will be able to inspect it closely (props + events). Otherwise, please provide a [repro] or public GitHub link. – kissu Nov 29 '22 at 02:24
  • I found a problem, it is being global to all of them, how to target it to each component – Rustam Ravshanovich Dec 01 '22 at 00:12
  • @kissu I edited code, please check – Rustam Ravshanovich Dec 01 '22 at 00:23
  • 1
    Does this one help? https://stackoverflow.com/a/74608573/8816585 – kissu Dec 01 '22 at 00:49
  • @kissu Yes, it will help thank you, but is there any another way to do it? Because, if I do it with adding boolean property to my card object I should iterate my cards array twice when user opens delete-modal(to set one of them true) and when user cancels it(to set all of them false). Otherwise user will be able to open delete-modals all of the cards and I dont want it, I think it will be bad user experience – Rustam Ravshanovich Dec 01 '22 at 02:54
  • I just need to send props from CardsComponent to ModalsComponent without iterating ModalsComponent @kissu – Rustam Ravshanovich Dec 01 '22 at 03:09

0 Answers0