vue3+axios 实现添加表单信息,其中有部分获取本地存储的信息,部分需要用户输入
时间: 2024-02-13 12:07:31 浏览: 24
你好!可以通过以下步骤实现:
1. 在 Vue 组件中定义需要绑定的表单数据,例如:
```
data() {
return {
form: {
name: '',
age: '',
email: localStorage.getItem('userEmail') || '', // 从本地存储中获取用户邮箱信息
}
}
}
```
2. 在模板中使用 `v-model` 绑定表单数据,例如:
```
<form>
<label for="name">Name:</label>
<input type="text" id="name" v-model="form.name">
<label for="age">Age:</label>
<input type="number" id="age" v-model="form.age">
<label for="email">Email:</label>
<input type="email" id="email" v-model="form.email">
<button @click="submitForm">Submit</button>
</form>
```
3. 在方法中定义提交表单的函数 `submitForm`,在该函数中使用 Axios 发送 POST 请求,例如:
```
methods: {
submitForm() {
axios.post('/api/form', this.form)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
```
在以上代码中,`/api/form` 是后端接收表单数据的 API 地址,`this.form` 是提交的表单数据。可以根据实际情况修改地址和数据格式。
希望以上内容能够帮到你!