Vue JS报错：TypeError: Cannot read property 'preventDefault' of undefined——使用v-model的表单提交问题排查

嘿，这个问题我之前也碰到过，咱们来看看问题出在哪～

你报错的核心原因是事件对象没有正确传递到onSubmit方法里。看你的模板代码：

<form @submit="onSubmit()">

当你用onSubmit()这种带括号的方式调用方法时，Vue不会自动把事件对象e传递进去，所以onSubmit方法里的e就是undefined，调用e.preventDefault()自然就报错了。

修复方法有两种： #

• 方法一：去掉方法后的括号
  直接绑定方法名，Vue会自动把事件对象作为第一个参数传入：

  <form @submit="onSubmit">
  

• 方法二：手动传递事件对象
  如果之后你需要给方法传其他参数，同时也要拿到事件对象，可以用$event显式传递：

  <form @submit="onSubmit($event)">
  

修改之后，onSubmit里的e就能正确拿到表单提交的事件对象，调用preventDefault()就不会报错啦。

另外也可以顺便检查下你的自定义Button组件，确保它点击时能正确触发原生的表单提交事件（比如组件内部的按钮要设置type="submit"，并且没有阻止默认行为），不过这不是当前报错的主要原因～

内容的提问来源于stack exchange，提问作者Gaurav