javascript - 无法阻止表单提交的默认值| View 3

Question

使用 Vue 3.0.5
我有一个表格:

<form id="app" @submit="onSubmit">
    <input type="text">
    <input type="text">
    <button type="submit">submit</button>
</form>

还有一个 Vue 组件:

Vue.createApp({
    data() {
        return {}
    },
    methods: {
        onSubmit(e) {
            e.preventDefault();
        }
    }
}).mount('#app');

并且似乎无法阻止页面在表单提交时重新加载。在上面的版本中，我使用 e.preventDefault()在方法中。我也试过:

@submit.prevent而不是手动调用e.preventDefault()

v-on:submit打电话时e.preventDefault()

v-on:submit.prevent无需调用

@submit.prevent/v-on:submit.prevent并同时手动调用

除了恢复到 Vue 2 之外似乎没有任何效果。也许是 Vue 3 的问题或我缺少的一些怪癖？

Answer 1

一种解决方法是包装 form在另一个元素中，例如 div ，并将其用作挂载点:

<script src="https://unpkg.com/vue@3.0.5"></script>

<div id="app">
  <form @submit.prevent="onSubmit">
      <input type="text">
      <input type="text">
      <button type="submit">submit</button>
  </form>
</div>

<script>
Vue.createApp({
  methods: {
    onSubmit() {
      console.log('submit')
    }
  }
}).mount('#app')
</script>