如何在模态中显示v-for中被点击元素的vue数据

<template>
  <div>
    <!-- 在v-for中遍历数据 -->
    <div v-for="item in items" :key="item.id">
      <!-- 绑定点击事件，将被点击元素的数据赋值给selectedItem -->
      <div @click="showModal(item)">{{ item.name }}</div>
    </div>

    <!-- 模态框 -->
    <div v-if="selectedItem">
      <!-- 在模态中显示selectedItem的数据 -->
      <p>{{ selectedItem }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItem: null
    };
  },
  methods: {
    showModal(item) {
      // 将被点击元素的数据赋值给selectedItem
      this.selectedItem = item;
    }
  }
};
</script>