小编Shi*_*iki的帖子

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

我目前正在使用 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>
    `,
Run Code Online (Sandbox Code Playgroud)

我想通过单击一键提交所有表单中的所有更改(我更希望能够在没有实际按钮的情况下按 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 …
Run Code Online (Sandbox Code Playgroud)

html javascript vue.js

6
推荐指数
0
解决办法
48
查看次数

标签 统计

html ×1

javascript ×1

vue.js ×1