Vue3 表单提交事件处理

2022年10月 · 预计阅读时间： 2 分钟

软件工程师 / B站UP主

这篇文章我们看一下对于表单整体的提交事件应该如何处理，并引入一个事件修饰符的概念。我们继续使用上篇文章的项目示例，这里我把 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 的介绍。

修饰符​

小结​

修饰符

小结