ヴュー - 私はバックエンドから取得したデータを使用して動的にフォームを作成してい動的に作成したフォーム

Question

を提出：Vueので

{ 
    "title": "Contact Me", 
    "fields": [ 
     { 
      "label": "Name", 
      "type": "textbox", 
      "required": "1" 
     }, 
     { 
      "label": "Email", 
      "type": "email", 
      "required": "1" 
     }, 
     { 
      "label": "Message", 
      "type": "textarea", 
      "required": "1" 
     }, 
     { 
      "label": "Submit", 
      "type": "submit", 
      "required": null 
     } 
    ] 
} 

を、私はこのフォームを作っていますコンポーネントは次のようになります。

<form @submit.prevent="submit()" class="form"> 
    <template v-for="input in ninjaForm.fields"> 
    <div v-if="input.type != 'submit' && input.type != 'textarea'" class="control"> 
     <input 
     v-bind:value="form[input.label]" 
     class="input is-large" 
     :type="input.type" 
     :name="input.label.toLowerCase()" 
     :required="input.required == 1"> 
     <label>{{ input.label }}</label> 
    </div> 
    <div v-if="input.type == 'textarea'" class="control"> 
     <textarea 
     v-bind:value="form[input.label]" 
     class="textarea" 
     :name="input.label.toLowerCase()"> 
     </textarea> 
     <label>{{ input.label }}</label> 
    </div> 
    <div v-if="input.type == 'submit'"> 
     <button class="button is-primary">{{ input.label }}</button> 
    </div> 
    </template> 
</form> 

私はバックエンドに戻って、このデータを提出したいと思いますが、私はそれを行う方法がわからないですが、私はこのような何かを試してみました：

data() { 
     return { 
     form: {}, 
     }; 
    }, 
    methods: { 
     submit() { 
     let payload = { 
      headers: { 
      'Content-Type': 'application/json' 
      }, 
      params: JSON.parse(JSON.stringify(this.form)) 
     }; 
console.log(payload); 
     this.$backend.post('submit', null, payload) 
      .then(_ => { 
       this.response = 'Meldingen ble sendt!'; 
      }, err => { 
       console.warn(err); 
       this.response = 'En feil oppstod under innsending av skjemaet, prøv igjen senere.'; 
      }); 

     } 
    } 

しかし、私がしているときconsole.log(this.form)私はobserver objectを取得し、私が行う場合console.log(payload)私は空のparamsプロパティを取得します。私は間違って何をしていますか、これを修正してフォームデータをparamsオブジェクトとして送信できるようにするにはどうすればいいですか？

私はこのように、作成された方法でフォームのプロパティを設定して試してみました：私がいたとき、

form: { 
    email:"", 
    message:"", 
    name:"", 
    submit:"" 
} 

をしかし、このようになりますプロパティを持つオブジェクトを作った

created() { 
     this.ninjaForm.fields.forEach(field => this.form[field.label.toLowerCase()] = ''); 
    }, 

フォームを送信すると、このプロパティの値はまだ空です：

v-bind:value="form[input.label.toLowerCase()]" 

私はLSO v-modelにv-bind:valueを変えてみましたが、その後、私はエラーを持っている：

v-model does not support dynamic input types. Use v-if branches instead.

Answer 1

このスレッドを確認してください：それはVモデルで動作するように https://github.com/vuejs/vue/issues/3915#issuecomment-294707727

は思えます。ただし、入力タイプでv-bindを使用すると、これは機能しません。唯一の回避策は、すべての可能なフォームタイプに対してv-ifを作成することです。本当に迷惑ですが、明らかな他の解決策はないようです。