vue实现新增表单

Vue 实现新增表单的方法

表单数据绑定

使用 v-model 指令实现表单数据的双向绑定。在 Vue 组件的 data 中定义表单数据的初始值。

data() {
  return {
    formData: {
      name: '',
      email: '',
      age: ''
    }
  }
}

表单模板部分：

<form @submit.prevent="handleSubmit">
  <input v-model="formData.name" placeholder="姓名">
  <input v-model="formData.email" placeholder="邮箱">
  <input v-model="formData.age" placeholder="年龄" type="number">
  <button type="submit">提交</button>
</form>

表单验证

可以使用 Vue 的计算属性或第三方库如 VeeValidate 进行表单验证。

基础验证示例：

computed: {
  isFormValid() {
    return (
      this.formData.name.trim() !== '' &&
      this.formData.email.includes('@') &&
      this.formData.age > 0
    )
  }
}

提交处理

在 methods 中定义提交处理函数，可以包含验证逻辑和提交逻辑。

methods: {
  handleSubmit() {
    if (!this.isFormValid) {
      alert('请填写完整表单')
      return
    }

    // 提交数据到API或父组件
    this.$emit('form-submit', this.formData)

    // 重置表单
    this.formData = {
      name: '',
      email: '',
      age: ''
    }
  }
}

表单组件化

对于复杂表单，可以将表单字段拆分为子组件，通过 props 和 $emit 实现数据传递。

子组件示例：

props: ['value'],
methods: {
  updateValue(e) {
    this.$emit('input', e.target.value)
  }
}

父组件使用：

<custom-input v-model="formData.name"></custom-input>

表单状态管理

对于大型应用，可以使用 Vuex 管理表单状态，实现跨组件共享表单数据。

Vuex store 示例：

state: {
  formData: {}
},
mutations: {
  updateFormData(state, payload) {
    state.formData = {...state.formData, ...payload}
  }
}