VueJS从Javascript激活boostrap模式，而不使用jQuery

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

谢谢：）

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

我尝试过使用ref方法，但它显示了一个错误 此.$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>

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

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

Bootstrap5删除了jQuery依赖项，不再需要

有关Bootstrap 5的更多详细信息，请访问：

有关Bootstrap 4的更多详细信息，请访问： 根据，这是如何隐藏模态

\u hideModal（）{
此._element.style.display='none'
此._元素.setAttribute（'aria-hidden'，true）
此._元素.removeAttribute（'aria-modal'）
此.\u元素.removeAttribute（'角色'）
这是一个错误
这个._showbackground（（）=>{
$（document.body）.removeClass（类名称\u打开）
这._()
这是。_resetScrollbar（）
$（此.\u元素）.trigger（事件\u隐藏）
})
}

它将更改样式显示、隐藏的aria、类名和其他内容

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

consttogglemodel=（model）=>{
if（modal.classList.contains（“show”））{
modal.classList.remove（“show”）；
modal.style.display=“无”；
setAttribute（“aria hidden”、“true”）；
}否则{
modal.classList.add（“show”）；
modal.style.display=“块”；
setAttribute（“aria hidden”、“false”）；
}
}

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

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

---

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

Hi@Sibelle非常感谢您的回复。我已尝试遵循您的方法，但它显示了这样一个错误。$refs.loginerror.modal不是函数。我已经编辑了我上面的文章和我的代码以供参考。谢谢，正如在另一个回答中提到的，组件本身确实需要jquery库，即使您不使用它来切换模式，因此，您要么必须同时导入jquery，要么如上所述升级到Bootstrap5，但我个人建议您使用boostrapVue，而不仅仅是BootstrapVue，而且您不需要任何额外的jquery—它与vuejs更好地兼容

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

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

this.$refs.myModal.modal();