如何在Vue.js組件中嵌入Bootstrap模態框（Modal）

在Vue.js組件中嵌入Bootstrap模態框（Modal）可以通過以下步驟實現：

1. 首先，確保你已經引入了Bootstrap的CSS和JavaScript文件。你可以在HTML文件中添加以下代碼：

<link rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

2. 在你的Vue組件中，創建一個模態框的結構。你可以使用v-if指令來控制模態框的顯示與隱藏。例如：

<template>
  <div>
    <!-- 觸發模態框的按鈕 -->
    <button type="button" class="btn btn-primary" @click="showModal = true">打開模態框</button>
    <!-- 模態框結構 -->
    <div class="modal" tabindex="-1" role="dialog" v-if="showModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">模態框標題</h5>
            <button type="button" class="close" @click="showModal = false" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>模態框內容...</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="showModal = false">關閉</button>
            <button type="button" class="btn btn-primary">保存更改</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showModal: false, // 控制模態框顯示與隱藏的數據屬性
    };
  },
};
</script>

在這個例子中，我們創建了一個按鈕用于觸發模態框的顯示，然后定義了一個模態框的結構，并使用v-if指令根據showModal的值來決定是否顯示模態框。點擊關閉按鈕或模態框外部區域時，showModal會被設置為false，從而隱藏模態框。