触发提交并防止默认

Question

我正在尝试通过脚本中的引用调用表单上的提交方法。在表单标签上我有 @submit.prevent.

<template>
  <div id="app">
    <form ref="search-form" @submit.prevent="sub">
      <input type="text" required />
    </form>
    <button @click="submitForm">click me</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    submitForm() {
      this.$refs["search-form"].submit();
    },
    sub() {
      console.log("submitted");
    },
  },
};
</script>

我的问题是当我点击按钮时：

页面重新加载，如阻止默认设置不起作用
根本没有调用 sub()

为什么？

Answer 1

你的问题不清楚你想做什么，但也许你需要这个

    const app = new Vue({
      methods: {
       submitForm() {
      this.$refs["search-form"].submit();
    },
    sub() {
    alert('hello');
    },
      }
    })
    app.$mount("#app")

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  
  <div id="app">
    <form ref="search-form" @submit.prevent="sub">
        <input type="text" required/>
       <button @click.native.prevent="submitForm">Send</button>
    </form>
</div>

Answer 2

<template>
  <div id="app">
    <form ref="search-form">
      <input type="text" required />
    </form>
    <button @click.stop.prevent="processForm">click me</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    processForm() {
      // validation here
      this.$refs["search-form"].onsubmit = this.submitForm();
    },
    submitForm() {
      // AJAX here
      console.log("submitted");
    },
  },
};
</script>

⚠️ 我假设当您使用 prevent 时意味着您将在稍后阶段（可能在客户端验证之后）手动提交表单。然后它要么使用 AJAX 要么 Axios 将表单提交到服务器端。在此处的任何位置调用 submit() 仍会重新加载您的页面。

触发提交并防止默认

Trigger submit with prevent default

vue.js

vuejs2

submit