使用Vue JS为数组中的每个卡创建具有Modal的卡

<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Vue Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

data() {
  return {
    cards: [
      { 
        title: 'Card 1',
        description: 'This is card 1 description.'
      },
      {
        title: 'Card 2',
        description: 'This is card 2 description.'
      },
      // 可以继续添加更多的卡片对象
    ],
    selectedCard: null // 用于记录当前选中的卡片对象
  }
}

<div>
  <div class="card" v-for="card in cards" :key="card.title">
    <div class="card-body">
      <h5 class="card-title">{{ card.title }}</h5>
      <p class="card-text">{{ card.description }}</p>
      <button class="btn btn-primary" @click="selectedCard = card">查看详情</button>
    </div>
  </div>
</div>

<!-- 在Vue组件的模板中添加以下代码 -->
<div>
  <!-- 省略其他内容 -->

  <!-- Modal -->
  <div class="modal" tabindex="-1" role="dialog" v-if="selectedCard">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ selectedCard.title }}</h5>
          <button type="button" class="close" @click="selectedCard = null">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>{{ selectedCard.description }}</p>
          <!-- 添加其他详细信息 -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="selectedCard = null">关闭</button>
        </div>
      </div>
    </div>
  </div>
</div>