Vue - submitting dynamically created form

Question

I am creating a form dynamically with the data that I get from the backend:

{
    "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
        }
    ]
}

In Vue the component where I am making this form looks like this:

<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>

I would like to submit this data back to the backend, but I am not sure how to do that, I have tried with something like this:

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.';
            });

      }
    }

But when I am doing console.log(this.form) I get an observer object , and if I do console.log(payload) I get an empty params property. What am I doing wrong and how should I fix this so that I can send form data as a params object?

I have tried with setting the form properties on created method, like this:

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

Which has made an object with properties that looks like this:

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

But, when I was submitting the form, the values of this properties where still empty:

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

I have also tried with changing v-bind:value to v-model , but then I have got an error:

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

Answer 1

Please check this thread: https://github.com/vuejs/vue/issues/3915#issuecomment-294707727

Seems like it works with v-model. However, this doesn't work when you use a v-bind on the input type. The only workaround is to create a v-if for every possible form type. Really annoying, but there seems to be no apparent other solution.