vue实现表单填写

表单基础结构

在Vue中实现表单填写通常使用<form>标签结合v-model指令实现双向数据绑定。基础模板如下：

<template>
  <form @submit.prevent="handleSubmit">
    <label for="name">姓名：</label>
    <input id="name" v-model="formData.name" type="text">

    <label for="email">邮箱：</label>
    <input id="email" v-model="formData.email" type="email">

    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交数据：', this.formData)
    }
  }
}
</script>

表单验证

使用Vuelidate或原生验证实现数据校验：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" @blur="$v.name.$touch()">
    <span v-if="$v.name.$error">姓名不能为空</span>

    <input v-model="formData.email" @blur="$v.email.$touch()">
    <span v-if="$v.email.$error">请输入有效邮箱</span>
  </form>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    }
  },
  validations: {
    formData: {
      name: { required },
      email: { required, email }
    }
  }
}
</script>

动态表单字段

通过v-for实现动态增减表单字段：

<template>
  <form>
    <div v-for="(item, index) in formData.items" :key="index">
      <input v-model="item.value">
      <button @click="removeField(index)">删除</button>
    </div>
    <button @click="addField">新增字段</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        items: [{ value: '' }]
      }
    }
  },
  methods: {
    addField() {
      this.formData.items.push({ value: '' })
    },
    removeField(index) {
      this.formData.items.splice(index, 1)
    }
  }
}
</script>

表单提交处理

结合axios处理表单提交：

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/submit', this.formData)
      console.log('提交成功', response.data)
    } catch (error) {
      console.error('提交失败', error.response)
    }
  }
}

文件上传处理

实现文件上传字段：

<input type="file" @change="handleFileUpload">

<script>
methods: {
  handleFileUpload(e) {
    this.formData.file = e.target.files[0]
    // 或多文件处理
    // this.formData.files = Array.from(e.target.files)
  }
}
</script>

表单重置功能

添加表单重置方法：

methods: {
  resetForm() {
    this.formData = {
      name: '',
      email: '',
      items: [{ value: '' }]
    }
    this.$nextTick(() => {
      this.$v.$reset()
    })
  }
}