跳到主要内容位置

Vue3 表单提交事件处理

张旭乾

这篇文章我们看一下对于表单整体的提交事件应该如何处理,并引入一个事件修饰符的概念。 我们继续使用上篇文章的项目示例,这里我把 html 中,class 为 form 的 div 改成了 form 元素,CSS 的样式也作了对应的调整。

<div class="form">
->
<form></form>
</div>

现在,我们在 form 元素的结束标签之前,添加一个 button 按钮元素,作为表单的提交按钮,点击它表单就会提交。

<textarea id="intro" rows="10" v-model="intro"></textarea>
<!-- 在这里添加 -->
<button type="submit">提交</button>

要处理表单的提交事件,我们可以给 form 元素添加一个submit的事件监听,在表单元素上,使用@submit来添加事件监听,这里先写上事件处理函数的名字:handleSubmit

<form @submit="handleSubmit"></form>

之后打开 index.js 文件,我们定义这个方法,在 vue 的配置对象中添加一个 methods 属性,在里边定义 handleSubmit() 方法,这里我们简单的打印一下 data 中所有属性的值:

  methods: {
handleSubmit() {
console.log(
this.username,
this.gender,
this.interests,
this.occupation,
this.intro
);
},
},

好,我们运行一下项目试试看能不能打印出来,随便填上一点数据,点击提交,可以看到结果在打印到命令行之后,页面很快就刷新了,这是因为 form 表单在提交之后,会自动跳转,因为我们没有给 form 的 action 属性设置提交的 url,所以页面又重新加载了一次,这个时候,我们需要阻止这个默认的表单提交行为,在 handleSubmit() 事件处理函数中,我们可以通过接收 js 事件对象,并调用它的 preventDefault() 方法来阻止表单跳转:

handleSubmit(e) {
e.preventDefault();
console.log(
this.username,
this.gender,
this.interests,
this.occupation,
this.intro
);
},

这个时候,再试一下,填一些数据,点击提交,可以看到页面就不跳转了,浏览器控制台也打印出了我们填写的数据,这里注意 interests 复选框的值是一个 proxy,这个是 vue 响应式机制有关的内容,我们后面再解释,这里只要知道它可以跟普通对象一样使用就可以了,这里它是一个数组。

修饰符

对于调用 preventDefault()这种方式用的比较多,那么 vue 提供了 prevent 事件修饰符,来让我们避免在事件处理函数中手动调用 preventDefault()。事件修饰符是在 html 模板中使用的,用于给事件监听添加一些额外的功能。这里我们给表单的 submit 事件设置 prevent 事件修饰符,只需要在@submit 后面使用点号,加上修饰符的名字,prevent 就可以了:

<form @submit.prevent="handleSubmit">

这样在每次触发表单的提交事件时,vue 就会自动帮我们调用 event 事件对象中的 preventDefault() 方法。我们可以把 handleSubmit() 中的 preventDefault() 去掉了:

// e.preventDefault();

现在再运行一下示例,填写一些数据,点击提交,可以看到页面没有重新加载,输入的信息也打印到控制台了。对于 prevent 修饰符,可以用于所有需要调用 preventDefault() 的事件中,例如阻止 a 标签的链接跳转,可以在 click 事件中,使用 prevent 事件修饰符:

<a @click.prevent=""></a>

小结

这个就是表单提交的事件处理和事件修饰符 prevent 的介绍。

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买