提交时的 VueJS PreventDefault 表单操作不能与 ref 一起使用？答案

【问题标题】：VueJS PreventDefault form action on submit not working with ref?提交时的 VueJS PreventDefault 表单操作不能与 ref 一起使用？
【发布时间】：2020-09-23 16:05:20
【问题描述】：

目前我的<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 的默认操作。

【问题讨论】：

到底是怎么不工作的，控制台有什么错误吗？您还提到“它不运行”，您能否确认这个handleSubmit 函数实际上是否在组件的methods 部分内？
嗨@YomS。我已经更新了帖子以解决您的评论，因为没有错误。感谢您的观看！
在表单组件上手动设置ref 属性会对您有什么影响吗？听起来您想以编程方式在组件外部调用表单提交。

标签： javascript typescript vue.js vuejs2 vue-component

【解决方案1】：

这似乎工作正常（没有ref）。对我来说没有重复提交问题。

该组件是在带有类的 Typescript 中制作的，我很确定它等同于 typescript 组件的方法部分：（在 export default class ClassName extends Vue {} 内）

Yes, you're right.

但这里有一个 Javascript 的快速演示。（Typescript 等价物应该足够接近）。

new Vue({
  el: '#app',

  components: {
    TheForm: {
      props: {
        prevent: Boolean
      },
      
      render(createElement) {
        return createElement("form", {
          //ref: "formEl",
          on: {
            submit: this.handleSubmit
          }
        }, this.$slots.default);
      },

      methods: {
        handleSubmit(e) {
          if (this.prevent) {
            e.preventDefault();
          }
          //Other stuff that also rely on using e
        }
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app">
  <p>Clicking on this should do nothing, since the default page-redirecting behavior is prevented.</p>
  <the-form action="/should-be-prevented" prevent>
    <input type="submit" value='Do "prevented" submission' />
  </the-form>

  <p>This should work like normal submit buttons would. And once submitted, the whole screen should go blank (showing that the page has been redirected somewhere else).</p>
  <the-form action="/should-redirect">
    <input type="submit" value='Do "normal" submission' />
  </the-form>
</div>

使用ref提交表单：

new Vue({
  el: '#app',
  
  components: {
    TheForm: {
      props: {
        prevent: Boolean
      },
      
      render(createElement) {
        return createElement('form', {
          on: {
            submit: this.handleSubmit
          }
        }, this.$slots.default);
      },

      methods: {
        handleSubmit(e) {
          if (this.prevent) {
            e.preventDefault();
          }
          else {
            this.$el.submit(e);
          }

          //Other stuff that also rely on using e
        }
      }
    }
  }
})

form {
  border: 2px dotted lightgray;
  margin: 1rem auto;
  padding: 1rem;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app">
  <the-form ref="form1" action="/should-be-prevented" prevent>
    This form should stay, since the default page-redirecting behavior is prevented.
  </the-form>

  <the-form ref="form2" action="/should-redirect">
    This should work like normal forms would. And once submitted, the whole screen should go blank (showing that the page has been redirected somewhere else).
  </the-form>

  <hr />
  <p>Note that these buttons are <strong>outside</strong> of the respective forms, to demonstrate programmatic form-submission trigger. </p>
  <input @click="$refs.form1.handleSubmit($event)" value='Do "prevented" submission' type="button" />
  <input @click="$refs.form2.handleSubmit($event)" value='Do "normal" submission' type="button" />
</div>

【讨论】：