时间戳

首页 > 解决方案 > VueJS 在不使用 jQuery 的情况下从 Javascript 激活 boostrap 模态

javascript - VueJS 在不使用 jQuery 的情况下从 Javascript 激活 boostrap 模态

问题描述

我正在使用 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代码片段

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

标签： javascriptvue.jsbootstrap-4

解决方案

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

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

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

this.$refs.myModal.modal();

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

推荐阅读