在v-for元素上使用modal？

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <!-- 在每个循环的元素上添加一个按钮，用于触发modal的显示 -->
      <button @click="showModal(item.id)">打开Modal</button>
      <!-- 在每个元素下方添加一个modal组件，根据showModalData中的id值来控制显示和隐藏 -->
      <modal v-if="showModalData.id === item.id" @close="hideModal">
        <!-- 这里可以放置modal的内容 -->
        <h2>{{ item.title }}</h2>
        <p>{{ item.description }}</p>
      </modal>
    </div>
  </div>
</template>

<script>
import Modal from 'path/to/modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      items: [
        { id: 1, title: 'Item 1', description: 'Description for Item 1' },
        { id: 2, title: 'Item 2', description: 'Description for Item 2' },
        { id: 3, title: 'Item 3', description: 'Description for Item 3' }
      ],
      showModalData: {
        id: null
      }
    };
  },
  methods: {
    showModal(itemId) {
      // 根据传入的itemId设置showModalData中的id值，来显示对应的modal
      this.showModalData.id = itemId;
    },
    hideModal() {
      // 关闭modal，将showModalData中的id值重置为空
      this.showModalData.id = null;
    }
  }
};
</script>