Bootstrap modal與Vue

bootstrap 5與js

先載入沒有任何功能的bs5 modal元件，用純js

• 把data-bs-*都移除
• 加入id屬性，比較好取出dom
  • id="modalBtn"
  • id="modal
    

    //擷取dom
    const modalBtn = document.querySelector('#modalBtn');
    const modal = document.querySelector('#modal');
    

• 打開bs5 modal文件右方
  
  

  //將modal實體化
  //實體化,產生modal真的實體myModal
  const myModal = new bootstrap.Modal(modal)
  

• 再來繼續看能使用什麼方法
  
  on CodePen.</span>
  </p>
  https://static.coderbridge.com/img/suihsilan/284b8f60292741af9ba83778bf378f91.png)

• 以上我們用純js的方式來打開modal對話框，不是使用bs5提供的
  ## bs5 modal元件，用vue操作
  
• 要記得上方圖，bs5模板無法顯示vue大括號的資料寫入是因為dom元素的擷取時間與順序
• 因此這裡資料寫入，需要使用先使用到生命週期mounted

  * 表示我們想要畫面生成之後，再來重新擷取dom元素
  

  • 因此我們需要把

    const myModal = new bootstrap.Modal(modal); // 實體化
    設定成
    let myModal = ''空字串
    然後在生命週期生成之後
    再來重新擷取dom元素
    mounted() {
        myModal =  new bootstrap.Modal(document.querySelector('#modalBtn'))
    }

接下來要繼續調整save changes這個行為

• 在button上加入@click="closeModal()" 寫入methods:{}

  closeModal(){
    myModal.hide();
  }