Bootstrap 4 引导表单验证仅在重新加载页面后在nuxt.js中有效

im将引导（普通引导，而不是vue引导）与nuxt.js一起使用。我有一个表单，我想使用引导表单验证

看起来像这样：

我的表单具有novalidate属性，所有输入都是必需的。我还有一个提交事件和一个预防：

form v-on:submit.prevent=“formSubmit”

这只是引导文档中未修改的代码：

(function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();

我在plugins文件夹中有一个名为bootstrap-form-validation.js的文件

然后在nuxt.config.js中：

plugins: [
    { src: '~/plugins/bootstrap-form-validation.js', mode: 'client' }
],

我还将其设置为仅运行客户端，因为我使用服务器端渲染，如果未设置，则会导致站点崩溃

现在的问题是，当我最初进入联系人页面并在所有字段都为空的情况下单击submit按钮时，什么都没有发生。我可以将消息记录到控制台，但表单未经验证。我可以刷新页面，然后验证工作

目前，我使用的解决方案如下：

我能做的是：

mounted(){
    if(localStorage.getItem('reload')){
      localStorage.removeItem('reload')
    } else {
      localStorage.setItem('reload', '1')
      location.reload();
    }
  }

第一次转到路线时刷新页面。这使得表单验证工作正常。尽管在理想情况下，它可以立即工作，而无需强制重新加载页面