vue表单数据提交

如何提交表单数据:

//1、首先验证表单,true则可以通过,false不能通过

//2、写接口提交表单数据

//3、关闭弹窗

//4、让数据立即显示在页面上

//  1、
await this.$refs.formRef.validate()
//  2、
try {
  await addDepartment({
    ...this.formData,
    pid: this.treeNode.id
  })
  Message.success('添加部门成功')
//  3、
  this.closeDialog()
//  4、
  this.$emit('addDpts')
} catch (error) {
  console.dir(error)
}

### Vue 表单提交数据示例 在 Vue 中实现表单提交数据的过程可以通过 `v-model` 实现双向绑定,从而轻松获取用户的输入并将其传递到后端或其他逻辑处理模块[^1]。下面是一个完整的示例,展示如何创建一个简单的表单并通过 Vue 提交数据。 #### HTML 结构 首先,在 HTML 部分定义一个基本的表单结构: ```html <div id="app"> <form @submit.prevent="handleSubmit"> <!-- 用户名 --> <label for="username">用户名:</label> <input type="text" v-model="formData.username" required /> <!-- 密码 --> <label for="password">密码:</label> <input type="password" v-model="formData.password" required /> <!-- 提交按钮 --> <button type="submit">提交</button> </form> <p>已提交数据:</p> <pre>{{ submittedData }}</pre> </div> ``` #### JavaScript (Vue) 处理逻辑 接着,使用 Vue 来管理表单的状态和提交行为: ```javascript new Vue({ el: '#app', data() { return { formData: { username: '', password: '' }, // 存储表单数据的对象 submittedData: null, // 显示已提交数据 }; }, methods: { handleSubmit() { this.submittedData = JSON.stringify(this.formData); // 将表单数据转换为字符串形式 console.log('已提交:', this.submittedData); // 这里可以调用 API 或执行其他操作来发送数据至服务器 } } }); ``` 上述代码展示了如何利用 Vue 的事件修饰符 `.prevent` 来阻止默认的表单提交动作,并通过方法 `handleSubmit()` 获取用户填写的内容[^2]。 #### 样式美化 为了提升用户体验,还可以加入一些 CSS 样式使界面更加友好: ```css #app form { display: flex; flex-direction: column; } #app label, #app input { margin-bottom: 10px; } ``` 以上就是基于 Vue 构建的一个简单表单提交实例[^3]。它涵盖了从基础的 HTML 到 Vue 数据绑定以及最终的提交过程。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值