[英]Vue - submitting dynamically created form
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: 在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>
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. 但是当我做
console.log(this.form)
我得到一个observer object
,如果我做console.log(payload)
我得到一个空的params
属性。 What am I doing wrong and how should I fix this so that I can send form data as a params object? 我在做什么错,应该如何解决这个问题,以便可以将表单数据作为params对象发送?
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-bind:value
更改为v-model
,但是随后出现错误:
v-model does not support dynamic input types.
v模型不支持动态输入类型。 Use v-if branches instead.
而是使用v-if分支。
Please check this thread: https://github.com/vuejs/vue/issues/3915#issuecomment-294707727 请检查此线程: https : //github.com/vuejs/vue/issues/3915#issuecomment-294707727
Seems like it works with v-model. 似乎可以与v模型一起使用。 However, this doesn't work when you use a v-bind on the input type.
但是,当您在输入类型上使用v-bind时,这将不起作用。 The only workaround is to create a v-if for every possible form type.
唯一的解决方法是为每种可能的表单类型创建一个v-if。 Really annoying, but there seems to be no apparent other solution.
确实很烦人,但似乎没有其他解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.