Bootstrap 5.2.3结合Vue实现验证通过后打开模态框的方法

使用Bootstrap 5.2.3时，希望在打开模态框前先做值的验证，但data-bs-toggle和data-bs-target会直接触发模态框打开。尝试在Vue中通过动态绑定这两个属性（根据isValidFirst布尔值切换）实现验证后打开，但没成功，调用modal.show()方法也无效。相关代码如下：

模板代码 #

// 按钮部分
<button
  type="button"
  @click="validateFirstStep()"
  class="submitBtn"
  :data-bs-toggle="isValidFirst ? 'modal' : ''"
  :data-bs-target="isValidFirst ? '#popup' : ''"
>
  <p>Save</p>
</button>

// 模态框部分
<div
  class="modal fade"
  id="popup"
  tabindex="-1"
  aria-labelledby="popupLabel"
  aria-hidden="true"
>
  this is modal
</div>

脚本代码 #

validateFirstStep() {
  if(!this.userId) this.isValidFirst = false;
  if(!this.userName) this.isValidFirst = false;

  if(this.isValidFirst) {
    this.submitData();
  } 
},

如何实现先执行验证方法，仅在验证通过时再打开模态框？

解决方案 #

别依赖data-bs-*属性自动触发模态框了，完全改成手动控制就行，步骤如下：

1. 修改按钮代码
   把按钮上的data-bs-toggle和data-bs-target全部移除，只保留点击事件：

   <button
     type="button"
     @click="validateFirstStep()"
     class="submitBtn"
   >
     <p>Save</p>
   </button>
   

2. 修正验证逻辑
   验证前先把isValidFirst设为true，避免初始值未定义导致逻辑出错：

   validateFirstStep() {
     this.isValidFirst = true; // 默认验证通过
     if(!this.userId) this.isValidFirst = false;
     if(!this.userName) this.isValidFirst = false;
   
     if(this.isValidFirst) {
       this.submitData();
       this.openModal(); // 验证通过后再打开模态框
     } 
   },
   

3. 实现手动打开模态框的方法
   通过Bootstrap的Modal实例控制显示，用Vue的ref获取DOM元素更符合Vue规范：
   先给模态框添加ref属性：

   <div
     class="modal fade"
     id="popup"
     ref="popup"
     tabindex="-1"
     aria-labelledby="popupLabel"
     aria-hidden="true"
   >
     this is modal
   </div>
   

   然后编写打开模态框的方法：

   openModal() {
     const modal = new bootstrap.Modal(this.$refs.popup);
     modal.show();
   }
   

内容的提问来源于stack exchange，提问作者Sean