Question

我需要以编程方式提交表单，但是我也需要它来阻止Default。

现在我有以下内容：

    submit () {
       this.$refs.form.submit()
    }

它工作正常，但是我不能阻止默认的提交，最后，刷新页面。

Answer 1

有多种方法可以修改事件。

From the Vue docs：

<块引用>

调用 event.preventDefault() 或 event.stopPropagation() 内部事件处理程序。虽然我们可以做到这一点很容易在方法内部，如果方法可以纯粹是更好的关于数据逻辑，而不必处理 DOM 事件细节。

为了解决这个问题，Vue 为 v-on 提供了事件修饰符。记起修饰符是用点表示的指令后缀。

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

Another option：

<块引用>

有时我们还需要在内联语句处理程序中访问原始 DOM 事件。您可以使用特殊的 $event 变量将其传递给方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

干杯:)

Answer 2

我不知道我是否正确理解了您的问题，但是您可以防止表单的默认行为如下：

this.$refs.form.addEventListener("submit", (event) => {
    event.preventDefault()
});

也许这可以帮助您：

new Vue({
  el: '#app',
  data: {},
  methods: {
    submit () {
      this.$refs.form.addEventListener('submit', event => {
        event.preventDefault()
      })
    },
    alert () {
      alert('hello')
    }
  }
})

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <div id='app'>
    <div class="form-wrapper" @click='submit'>
      <form ref='form' @submit='alert'>
        <input type="text">
        <button type='submit'>Submit</button>
      </form>
    </div>
  </div>
</body>

Answer 3

首先，不要使用preventDefault方法。我将在jQuery上说明此问题：

$('#myForm').on('submit', function (event) {
  // step 1.
  // stop current action, prevent submitting 
  event.preventDefault()

  // step 2.
  // validate inputs
  // some validation code

  // step 3.
  // everything ok, submit it
  this.submit()
})

此代码在哪里出问题？当您在步骤3中以编程方式提交此表单时，它将再次被捕获，并再次在步骤1中停止。因此，您将永远无法提交此表格。解决方案：

$('#myForm').on('submit', function (event) {
  // step 1.
  // validate inputs
  // some validation code
  // this code will be always executed
  // before this form will be submitted

  // step 2.
  // then do something like this
  // continue submitting form and exit
  // this callback with returning true
  if (inputsAre === 'ok') return true
  // if inputs are not ok, program continues
  // with following line, which ends this
  // callback with false and form will be not submitted
  return false
})

我希望你明白这一点。因此，我认为您所需要的不是preventDefault方法，而是在@submit事件上调用的doSomething方法中返回true或false。

Answer 4

不是很了解@Armin Ayaris的答案，例如，为什么代码必须在console.log对象中？无论如何在Vue中这对我来说都是有效的：

methods

这阻止了页面刷新，而是调用了<form ref="form" @submit.prevent='myMethod'> <button type="submit"></button> </form>。

您甚至不需要myMethod。理解这是一个老问题，但是我在调试后发现自己在这里，发现我的表单标签只是放错了位置。

VueJs 2-$ refs.form.submit（）上的preventDefault（）

4 个答案: