Question

我正在使用从后端获得的数据动态创建表单：

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

在Vue中，我制作此表单的组件如下所示：

<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对象发送？

我尝试在创建的方法上设置表单属性，如下所示：

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

这使得对象的属性看起来像这样：

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

但是，当我提交表单时，此属性的值仍为空：

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

我也试过将v-bind:value更改为v-model，但后来又出现了错误：

v-model不支持动态输入类型。使用v-if分支代替。

Answer 1

请检查此主题： https://github.com/vuejs/vue/issues/3915#issuecomment-294707727

似乎它适用于v-model。但是，在输入类型上使用v-bind时，这不起作用。唯一的解决方法是为每种可能的表单类型创建一个v-if。真烦人，但似乎没有明显的其他解决方案。

Vue - 提交动态创建的表单

1 个答案: