Vue.js 使用防止默认值触发提交

我试图通过脚本中的引用调用表单上的submit方法。在表单标签上，我有

@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>

点击我
导出默认值{
名称：“应用程序”，
方法：{
submitForm（）{
此.$refs[“搜索表单”].submit（）；
},
分（）{
控制台日志（“已提交”）；
},
},
};

我的问题是，当我单击按钮时：

• 像“防止默认值”一样重新加载页面不起作用
• 根本不调用sub（）

---

为什么？

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

const-app=新的Vue({
方法：{
submitForm（）{
此.$refs[“搜索表单”].submit（）；
},
分（）{
警惕（“你好”）；
},
}
})
app.$mount（“#app”）

发送

点击我
导出默认值{
名称：“应用程序”，
方法：{
processForm（）{
//在此验证
this.$refs[“搜索表单”].onsubmit=this.submitForm（）；
},
submitForm（）{
//这里是阿贾克斯
控制台日志（“已提交”）；
},
},
};

⚠️ 我假设当您使用

prevent

时，意味着您将在稍后阶段（可能在客户端验证之后）手动提交表单。然后使用AJAX或Axios将表单提交到服务器端。在此处任何地方调用

submit（）

仍将重新加载页面