为卡创建模态

Question

我的页面上有一系列卡片。每张卡都有一个按钮来打开带有某些选项的模态。哪种方法更有效地服务于模式？

1. 将模态的HTML一次存储在页面上。从每张卡发出事件并加载单个模式（传递任何相关数据，例如发出事件的卡ID）。
2. 为每张卡都设置一个模态，但是用v-if隐藏它，因此不进行渲染。无论如何，该模式不太可能经常打开。
3. 还有什么？

谢谢您的想法。

Answer 1

我认为，更好的方法必须是这样的：

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

也许对话框必须是不同的组件。

我认为方法1似乎如此。