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

Question

我正在使用 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();
});

Answer 1

由于您使用的是 Vuejs，因此您应该使用 refs，在模板中的模态上设置您的引用，例如:

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

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

this.$refs.myModal.modal();

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