vue 接口提交多个相同字段
时间: 2023-08-22 12:03:35 浏览: 90
如果你想在 Vue 中通过接口提交多个相同字段的数据,你可以将这些数据绑定到同一个数组或对象中,然后在提交时将该数组或对象发送到服务器。
在发送数据之前,你需要使用 `axios` 或其他 AJAX 库来发送 HTTP 请求。以下是一个使用 `axios` 发送多个相同字段的数据的例子:
```
<template>
<form @submit.prevent="submitForm">
<input v-model="formData.names[0]" type="text">
<input v-model="formData.names[1]" type="text">
<input v-model="formData.names[2]" type="text">
<button type="submit">Submit</button>
</form>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
formData: {
names: ['', '', '']
}
}
},
methods: {
submitForm() {
axios.post('/api/submitData', {
names: this.formData.names
}).then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
}
}
}
</script>
```
在这个例子中,我们在 formData 对象中定义了一个 names 属性,它是一个数组,包含三个空字符串。在表单中,我们使用 v-model 指令将三个输入框分别绑定到数组的不同位置。当用户提交表单时,我们使用 axios 发送一个 POST 请求,并将 formData 对象中的 names 数组作为请求体发送到服务器。
在服务器端,你可以像处理其他请求数据一样处理这个 POST 请求。根据你的需求,你可以将请求体解析为 JSON 或其他格式,并从中提取出相同的字段数据进行处理。
阅读全文