如何在v-for循环中调用模态组件？

<!-- 父组件 -->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <button @click="openModal(index)">打开模态框</button>
    </div>
    <modal :data="selectedData" v-if="selectedData" @close="closeModal"></modal>
  </div>
</template>

<script>
import Modal from './Modal.vue';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedData: null
    };
  },
  methods: {
    openModal(index) {
      this.selectedData = this.items[index];
    },
    closeModal() {
      this.selectedData = null;
    }
  },
  components: {
    Modal
  }
};
</script>

<!-- 模态框组件（Modal.vue） -->
<template>
  <div class="modal">
    <div class="modal-content">
      <h2>{{ data.name }}</h2>
      <!-- 模态框内容 -->
      <button @click="$emit('close')">关闭模态框</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data']
};
</script>