阻止 Vue 中的按钮提交表单

在 Vue 中，我们经常会使用表单来收集用户的输入信息，并在提交表单时执行一些操作。有时候，我们需要在提交表单之前进行一些额外的验证或执行其他操作，这时就需要阻止按钮提交表单。

方法一：使用事件修饰符

Vue 提供了一种简洁的方式来阻止按钮默认的表单提交事件，即使用事件修饰符 @submit.prevent 或 .prevent。这样一来，在按钮点击时，Vue 会自动阻止表单提交，并调用对应的方法。

以下是一个示例：

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="name">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    submitForm() {
      // 在这里可以执行一些额外的验证或其他操作
      // ...
      
      // 最后可以选择是否继续提交表单
      // 如果不需要提交表单，直接 return false 即可
    }
  }
}
</script>

在上面的例子中，我们通过 @submit.prevent="submitForm" 将表单提交事件与 submitForm 方法关联起来。在 submitForm 方法中，我们可以对表单进行验证或其他操作，并根据需要选择是否继续提交表单。

方法二：使用 event.preventDefault()

如果你需要在方法中动态控制是否阻止表单提交，可以使用 JavaScript 提供的 event.preventDefault() 方法来手动阻止默认的表单提交事件。

以下是一个示例：

<template>
  <form @submit="submitForm">
    <input type="text" v-model="name">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    submitForm(event) {
      // 在这里可以执行一些额外的验证或其他操作
      // ...
      
      // 最后可以选择是否继续提交表单
      // 如果不需要提交表单，调用 event.preventDefault()
      event.preventDefault();
    }
  }
}
</script>

在上面的例子中，通过 @submit="submitForm" 将表单提交事件与 submitForm 方法关联起来。在 submitForm 方法中，我们可以对表单进行验证或其他操作，并根据需要调用 event.preventDefault() 方法来阻止表单提交。

这两种方法在 Vue 中都可以用来阻止按钮提交表单。根据需要选择其中的一种方式即可。