forms - 防止 Vue.js 中的表单默认行为

Question

我正在构建一个带有表单的 Vue.js 应用程序，我想知道有没有办法使用内置的 Vue.js 来防止 HTML 5 表单默认行为 .prevent ?我试过<form.prevent>和 <form v-on:submit.prevent>但无济于事。这里有什么帮助会很棒吗？

Answer 1

v-on 指令(简写 @ )是将 Vue 实例方法或 JS 表达式绑定(bind)到事件:

Attaches an event listener to the element. […] The expression can be a method name, an inline statement, or omitted if there are modifiers present.

因此，即使您没有指定方法或表达式/内联语句，您的 .prevent修饰符在任何情况下都应该起作用:

new Vue({
  el: '#app',
  methods: {
    formSubmit() {
      console.log('form submitted');
    },
  },
});

<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <form @submit.prevent>
    <span>Form WITH submit.prevent and no expression attached</span>
    <button type="submit">Submit form</button>
  </form>
  <form @submit.prevent="formSubmit">
    <span>Form WITH submit.prevent</span>
    <button type="submit">Submit form</button>
  </form>
  <form @submit="formSubmit">
    <span>Normal form without prevent</span>
    <button type="submit">Submit form</button>
  </form>
</div>