[Vuejs]-Create a modal for a card

by

2👍

✅

In my opinion it’s unlikely that there would be significant performance problems with a bunch of cards and dialogs whichever way you go. Both of your proposed solutions would work fine performance wise. This means you could decide based on other very important factors.

I believe the second solution is preferable because it encapsulates the behavior better, and does not push the responsibility of displaying the modal dialog to the parent of all cards. It also scales better, because if you had lets say slightly different types of modal dialogs, you would have an option to simply use different dialog component in different cards easily. You would not have to deal with either giving parent even more responsibility (having to decide which dialog component to display), or deal with having one dialog component which would have to do too much because of the need to display different types of contents.

I would also advise you to take a look at the portal-vue, which would allow you to use your dialogs as part of your cards, and at the same time render them wherever you need in the DOM. For example in the end of the root element of your application (or even in your parent component).

👤ajobi

1👍

In my opinion, the better way must be something like that:

<template>
  <div>
    <div v-for="card in cards">
      <span>Card: {{ card }} </span>
      <button @click="open(card)">Open</button>
    </div>
    <dialog open v-if="cardSelected">
      CardSelected: {{ cardSelected }}
      <button @click="close">Close</button>
    </dialog>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    cards: [1, 2, 3, 4, 5],
    cardSelected: null,
  }),
  methods: {
    open(card) {
      this.cardSelected = card;
    },
    close() {
      this.cardSelected = null;
    },
  },
};
</script>

Maybe the dialog must be a diferente component.

I think that way seems to option 1.

👤Gabriel Willemann

Leave a comment