我目前正在使用 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)