VueJS 在不使用 jQuery 的情况下从 Javascript 激活引导模式答案

【问题标题】：VueJS activate boostrap modal from Javascript without the use of jQueryVueJS 在不使用 jQuery 的情况下从 Javascript 激活引导模式
【发布时间】：2021-07-13 00:35:07
【问题描述】：

我正在使用 vuejs 开发一个应用程序。当用户登录到我的应用程序时，我想使用引导模式而不是旧式警报来显示错误（如果有）。有没有办法在不使用 jQuery 的情况下从 javascript 中“弹出”模式？

谢谢你:)

$("#loginerror").modal();

上面的代码使用了 jQuery，但我不想使用它。

我尝试过使用 ref 方法，但它显示错误提示 this.$refs.loginerror.modal 不是函数

下面是我的 ref 方法代码：

  <!-- Modal -->
  <div ref="loginerror" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Login Error</h4>
        </div>
        <div class="modal-body">
          <p id = "loginerrormsg"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

Javascript 代码的 sn-ps

.catch((error) => {
    document.getElementById("loginerrormsg").innerHTML = error;
    this.$refs.loginerror.modal();
});

【问题讨论】：

标签： javascript vue.js bootstrap-4

【解决方案1】：

由于您使用的是 Vuejs，因此您应该使用 refs，在模板中的模态中设置您的参考，例如：

<div ref="myModal">
</div>

在您的代码中，您可以按如下方式激活它：

this.$refs.myModal.modal();

这是在 vue 中访问 DOM 的最佳方式

【讨论】：

嗨@Sibelle 非常感谢您的回复。我已经尝试按照您的方法进行操作，但它显示错误提示 this.$refs.loginerror.modal 不是函数。我已经编辑了上面的帖子以及我的代码以供参考。谢谢
正如另一个答案中提到的，组件本身确实需要 jquery 库，即使你不会使用它来切换模式，所以你要么必须导入 jquery 或者如提到的升级到 bootstrap 5，但我个人建议您使用 boostrapVue 而不仅仅是引导程序，并且您不需要任何额外的 jquery 它与 vuejs 更好地兼容

【解决方案2】：

根据bootstrap source code，这是隐藏模态的方法。

  _hideModal() {
    this._element.style.display = 'none'
    this._element.setAttribute('aria-hidden', true)
    this._element.removeAttribute('aria-modal')
    this._element.removeAttribute('role')
    this._isTransitioning = false
    this._showBackdrop(() => {
      $(document.body).removeClass(CLASS_NAME_OPEN)
      this._resetAdjustments()
      this._resetScrollbar()
      $(this._element).trigger(EVENT_HIDDEN)
    })
  }

它会改变样式显示、aria-hidden、类名和其他东西。

这是一个简单的重新实现。可能无法正常工作。但它确实显示和隐藏模式。

const toggleModal = (modal) => {
  if (modal.classList.contains("show")) {
    modal.classList.remove("show");
    modal.style.display = "none";
    modal.setAttribute("aria-hidden", "true");
  } else {
    modal.classList.add("show");
    modal.style.display = "block";
    modal.setAttribute("aria-hidden", "false");
  }
}

【讨论】：

【解决方案3】：

引导程序 4：
我们的许多组件都需要使用 JavaScript 才能运行。具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。

所以 Bootstrap 4 需要 jQuery 作为依赖项。如果您仍然不想在应用程序中使用 jQuery，可以迁移到 Bootstrap 5。

Bootstrap 5 删除了 jQuery 依赖，不再需要。

有关 Bootstrap 5 的更多详细信息，您可以访问：https://getbootstrap.com/docs/5.0/getting-started/javascript/

有关 Bootstrap 4 的更多详细信息，您可以访问： https://getbootstrap.com/docs/4.1/getting-started/introduction/

【讨论】：