vue合并两个表单数据
时间: 2023-09-12 16:12:38 浏览: 70
如果你有两个表单,可以使用 JavaScript 中的 `Object.assign()` 方法将它们合并为一个对象,然后将该对象作为表单数据提交。
示例代码:
```html
<template>
<div>
<form @submit.prevent="submitForm1">
<input type="text" v-model="form1.name" placeholder="Name">
<input type="email" v-model="form1.email" placeholder="Email">
<button type="submit">Submit Form 1</button>
</form>
<form @submit.prevent="submitForm2">
<input type="text" v-model="form2.phone" placeholder="Phone">
<input type="text" v-model="form2.address" placeholder="Address">
<button type="submit">Submit Form 2</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
form1: {
name: '',
email: ''
},
form2: {
phone: '',
address: ''
}
}
},
methods: {
submitForm1() {
const formData = Object.assign({}, this.form1, this.form2)
console.log(formData)
// submit formData to server
},
submitForm2() {
const formData = Object.assign({}, this.form1, this.form2)
console.log(formData)
// submit formData to server
}
}
}
</script>
```
在上面的示例中,我们有两个表单:`form1` 和 `form2`。当我们提交 `form1` 时,我们调用 `submitForm1` 方法,创建一个新对象 `formData` 并使用 `Object.assign()` 方法将 `form1` 和 `form2` 合并为一个对象。最后,我们可以将该对象提交到服务器。
同样的,当我们提交 `form2` 时,我们调用 `submitForm2` 方法,使用同样的方式合并 `form1` 和 `form2` 并将其提交到服务器。