关于提交的VueJS PreventDefault表单操作不适用于ref?

问题描述 投票:0回答:1

目前,我的<script>中有类似以下代码的内容:

render(createElement) {
 return createElement("form", 
   {ref: "formEl" ,
     on: {submit: this.handleSubmit}
   }, 
   [ <insert create form inputs here> ]);
}

handleSubmit(e) {
 e.preventDefault();
 //Other stuff that also rely on using e
}

如果我在表单handleSubmit中放置一个提交按钮,则该按钮可以正常运行。但是,如果我要执行this.$refs.formEl.submit(),则HandleSubmit无法运行。

我已经尝试过将解决方案发布在:VueJs 2 - preventDefault() on $refs.form.submit()

通过添加事件监听方式如下:this.$refs.form.addEventListener("submit", this.handleSubmit);

可悲的是,这没有用。

编辑(在注释后):详细说明“无效”:我发现发生的事情是,当按下<form>标记HandleSubmit()中包含的提交按钮时,实际上运行了两次(我假设是两次添加一个侦听器)我添加了一些console.log()来处理提交,但在控制台上什么也没找到。

该组件是在Typescript中使用类制作的,我可以肯定,它等同于Typescript的组件的方法部分:(在export default class ClassName extends Vue {}内部)

[我发现,如果我在参考上触发<form>方法的submit()标记外部附加了按钮,则将执行使用表单内容更新URL的默认操作。

javascript typescript vue.js vuejs2 vue-component
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.