vue中如何写表单实现post
时间: 2024-03-09 13:51:17 浏览: 25
在 Vue 中,可以使用表单来提交 post 请求。以下是使用 `form` 表单提交 post 请求的示例代码:
```html
<template>
<form @submit.prevent="submitData">
<label>
First Name:
<input type="text" v-model="firstName">
</label>
<label>
Last Name:
<input type="text" v-model="lastName">
</label>
<button type="submit">Submit</button>
</form>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
firstName: '',
lastName: ''
}
},
methods: {
submitData() {
axios.post('/api/data', {
firstName: this.firstName,
lastName: this.lastName
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
在上面的例子中,我们使用了 `v-model` 指令将表单数据绑定到 Vue 实例的数据中,并在表单的 `submit` 事件中调用了 `submitData` 方法来发送 post 请求。在 `submitData` 方法中,我们使用了 axios 发送 post 请求,并将表单数据作为请求的数据对象传递给了服务器。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)