vue 表单提交

Vue 表单提交一般分为以下步骤：

定义表单数据：使用 Vue 实例的 data 属性来存储表单数据。
绑定表单数据：使用 v-model 指令将表单元素与数据绑定起来。
编写表单验证逻辑：使用计算属性或者 watch 来监听表单数据的变化，然后进行验证。
提交表单数据：一般使用 AJAX 或者 form 表单提交来提交表单数据。

以下是一个示例代码：

<template>
  <form @submit.prevent="submitForm">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" required>
    <br>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    submitForm() {
      // AJAX 或者 form 表单提交
    }
  },
  computed: {
    isValidForm() {
      return this.name !== '' && this.email !== ''
    }
  },
  watch: {
    name() {
      this.validateForm()
    },
    email() {
      this.validateForm()
    }
  },
  methods: {
    validateForm() {
      if (this.isValidForm) {
        // 验证通过
      } else {
        // 验证失败
      }
    }
  }
}
</script>

在这个示例中，我们定义了 name 和 email 两个表单数据，并且使用 v-model 指令将它们和表单元素绑定起来。我们还定义了一个 isValidForm 计算属性来判断表单是否合法。在 watch 中监听表单数据的变化，并且在 validateForm 方法中进行验证。最后，在 submitForm 方法中进行表单提交