Vue.js: 有没有办法在一个项目的所有表单上都有@submit.prevent？

Question

我意识到有些片段我每次都在重复，但有时我会忘记。

其中之一是@submit.prevent。在所有表单中我都必须编写它以防止提交，我将始终通过 vue 方法管理提交。

那么我可以做一些事情，所有的形式都隐含地有这个指令吗？

Answer 1

您可以创建一个简单的（可能是功能性的）组件并使用它来代替普通的 <form>。

// BaseForm.vue

<template>
  <form @submit.prevent="onSubmit">
    <slot />
  </form>
</template>

<script>
export default {
  props: {
    onSubmit: {
      type: Function,
      required: true,
    }
  }
}
</script>

你不会真的节省很多代码，但你不必再考虑它了。您也可以在此处包含基本的 <button type=submit></button>。

Vue.js: 有没有办法在一个项目的所有表单上都有@submit.prevent？

Vue.js: Is there a way to have @submit.prevent on all the forms of a project?

forms

form-submit

preventdefault

vue.js