前端vue 弹出对话框并向后端提交数据
时间: 2023-07-26 20:42:19 浏览: 63
可以使用vue中的组件库,如Element UI或者iview,来实现弹出对话框的效果。在弹出对话框中,添加表单元素,用户填写完毕后点击提交按钮,可以通过axios或者vue-resource等http请求库将数据提交给后端。
具体实现步骤如下:
1. 引入组件库,并按照文档使用对应的组件来实现弹出对话框的效果。
2. 在对话框中添加表单元素,如input、select等,定义v-model绑定数据。
3. 在表单中添加提交按钮,绑定点击事件,事件中使用http请求库将数据提交给后端。
例如,使用Element UI组件库来实现弹出对话框并提交数据的代码示例如下:
```
<template>
<div>
<el-button type="primary" @click="showDialog = true">添加用户</el-button>
<el-dialog title="添加用户" :visible.sync="showDialog">
<el-form ref="form" :model="formData">
<el-form-item label="用户名">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="formData.password"></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="submitForm">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
showDialog: false,
formData: {
username: '',
password: ''
}
}
},
methods: {
submitForm() {
axios.post('/api/addUser', this.formData)
.then(res => {
this.showDialog = false
// 提交成功后的操作
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
在这个示例中,我们使用了Element UI中的el-dialog弹出对话框组件,el-form表单组件和el-button按钮组件,通过v-model将表单数据绑定到formData对象上,通过axios.post方法将formData提交给后端接口。