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

Question

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

标签： formsvuejs2

Answer 1

v-on指令（简写@）是将 Vue 实例方法或JS 表达式绑定到事件：

将事件侦听器附加到元素。[…] 表达式可以是方法名称、内联语句，或者如果存在修饰符则省略。

因此，即使您没有指定方法或表达式/内联语句，您的.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>