如何使用 vue.js 綁定動態添加的表單輸入

Question

我想渲染一些表單並將它們綁定到 Vue。 表格列在 json 上 像這樣。

formslist:[
    "<input type='text' name='item1' v-model='item1'>",
    "<input type='text' name='item2' v-model='item2'>",
]

我可以渲染它們但無法綁定。 模板是這個。

<div v-for="form in formslist">
    <div v-html="form"></div>
</div>

后來才知道“v-html”添加的html不能使用數據綁定。 但是我不知道如何做到這一點。 有人會教我好的解決方案嗎？

---

抱歉語無倫次。 我寫了這樣的代碼，但“item1”和“item2”沒有綁定。

js：

new Vue({
  el: '#app',
  data() {
    return {
      formData: {},
      formslist:
        // this list is got by ajax as neccessary
        {
            "item1": "<input type='text' name='item1' v-model='formData.item1'>",
            "item2": "<input type='text' name='item2' v-model='formData.item2'>",
        }
    };
  },
  methods: {
    submit() {
      alert('formdata: ' +  JSON.stringify(this.formData));

      // submit data to backend
      // e.g. axios.post(...).then(...).catch(...);
    }
  }
})

html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
  <form name="myForm" @submit.prevent="submit">
    <div class="form-group">
      <label>Firstname</label>
      <input class="form-control" v-model="formData.firstName" type="text">
    </div>
    <div class="form-group">
      <label>Lastname</label>
      <input class="form-control" v-model="formData.lastName" type="text">
    </div>
    <div class="form-group">
      <label>Description</label>
      <textarea class="form-control" v-model="formData.description"></textarea>
    </div>

    <div class="form-group" v-for="(form, name) in formslist">
      <label>{{name}}</label>
      <div v-html="form"></div>
    </div>

    <button type="submit">
      Submit
    </button>
  </form>
</div>

Answer 1

Vue.js 是面向模型/數據的——查看文檔以了解更多信息。

因此，創建一個模型來存儲表單數據，然后使用該模型提交數據或對數據執行任何您喜歡的操作。

請查看下面的基本示例或this fiddle 。

更新 01.07.2017

好的，現在我明白你要做什么了。 請在下面或小提琴中找到我更新的代碼（相同的鏈接）。

你也可以使用像vue-form-generator這樣的表單生成器。 它和我的演示一樣——只需要更少的編碼。

它是如何工作的？

該表單將使用一個模板呈現，該模板從您可以從服務器獲取的模型中獲取數據。

輸入的類型不能與:type綁定，因為v-model不支持 - 當我嘗試時出現錯誤消息。 所以要多寫一點，但應該清楚它是如何工作的。 為其他類型添加類似的模板標簽。

為了進一步改進模型，您還可以存儲表單的頂層，以便您也可以自定義該顯示類。 例如：

{
  formName: 'myForm',
  className: 'form-horizontal',
  items: [...] // same array as before
}

如果您需要對某些輸入進行分組或以不同方式顯示它們，您可以向模型添加更多屬性，向模板添加更多邏輯。

 const formRenderModel = [{ type: 'text', modelName: 'firstName', className: 'form-control', labelText: 'First name', required: true }, { type: 'text', modelName: 'lastName', className: 'form-control', labelText: 'Last name', required: true }, { type: 'text', modelName: 'description', className: 'form-control', labelText: 'Description', required: true, pattern: '.{10,}', // minimum 10 characters validationMessage: 'Minimum 10 characters required' }]; new Vue({ el: '#app', data() { return { formData: {} }; }, created() { // later axios.get('/form-render).then(...).catch(...); // now just a constant this.formRenderModel = formRenderModel; }, methods: { submit() { console.log('formdata', this.formData); // submit data to backend // eg axios.post(...).then(...).catch(...); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="app"> <form name="myForm" @submit.prevent="submit"> <div v-for="inputModel in formRenderModel"> <label>{{inputModel.labelText}}</label> <template v-if="inputModel.type == 'text'"> <input type="text" v-model="formData[inputModel.modelName]" :class="inputModel.className" :pattern="inputModel.pattern" :title="inputModel.validationMessage" :required="inputModel.required" /> </template> <!-- add more templates for radios, checkboxes, .. --> </div> <button type="submit"> Submit </button> </form> </div>