一次提交多个表单时防止页面重新加载的更好方法？

Question

我目前正在使用 vue.js 制作参考 UI。为了通过从 settings.js 中读取来动态生成表单来更改设置，我像这样迭代它：

template: `
      <div class="card shadow p-3 mb-3 bg-white rounded ">
           <h2>{{settings.title}}</h2>
  
              <form v-bind:id="settings.formName">
                  <div class="form-group" v-for="input in settings.inputs" v-bind:key="input.name">
  
                      <label v-bind:for="input.name" v-if="input.label !== ''">{{input.label}}</label>
  
                      <textarea class="form-control" v-if="input.type == 'textarea'" v-bind:required="input.required" v-bind:maxlength="input.maxlength" v-bind:rows="input.rows" v-bind:cols="input.cols"></textarea>
  
                      <input class="form-control" v-else  v-bind:required="input.required" v-bind:maxlength="input.maxlength" v-bind:placeholder="input.placeholder" v-bind:type="input.type" v-bind:name="input.name" v-bind:id="input.name" >
  
                  </div>
              </form>
          </div>
      </div>
    `,

我想通过单击一键提交所有表单中的所有更改（我更希望能够在没有实际按钮的情况下按 Enter 提交它，但不推荐使用 vue 中的键盘事件）而无需重新加载页面。（我没有使用 jQuery）因此，在我的 index.html 中，我这样做：

<div id="app" class="container-fluid bg-light">
    <div class="row">

      <div class="col-12 text-center mt-3">
        <h1 class="border border-secondary">Dash Test</h1>
      </div>

      <div id="settings" class="col col-12 col-md-12 col-xl-2">
        <card v-for="item in Settings.settings" v-bind:key="item.title" v-bind:settings="item">
        </card>
      </div> 
        
        
        <input type="button" value="Test" onclick="submitForms()"/>
    </div>
  </div>
    
  <script type="text/javascript">
      
      var submittableForms = [];
      
      window.onload = function(){
          
          
          for(item in document.forms){
              if(typeof document.forms[item].id !== 'undefined'){
                  submittableForms.push(document.forms[item].id)
              }
              
          }
      }
      
      function submitForms(){
          for(item in submittableForms){
             var form = document.getElementById(submittableForms[item]);
             form.addEventListener('submit', handleForm)
             console.log(submittableForms[item]);
          }
      }
      
      function handleForm(event){
          event.preventDefault();
          event.submit();
      }
    
  </script>

经过几个小时的尝试，我发现了不同的方法，我想出了它，它工作正常。但是，我知道在 for 循环中添加 EventListener - 特别是当它被多次调用时 - 不是一个好习惯。但是，我还没有设法找到解决问题的另一种方法。

到目前为止我尝试过的：

• vue 使用@submit.prevent="myFunction"，处理方法部分的值传递。
• 使用“form.submit().preventDefault();有人说有效，但它只是给我“这不是一个函数”
• 使用 return=false; 调用 sumbit() 后；如本网站上的其他解决方案中所述，这也不起作用。

我能做的最后一件事是尝试在拆分“卡片”中使其成为一种形式，这应该可以绕过这个问题，但我仍然对人们如何以当前方式进行操作感兴趣。