vue 实现新增表单

使用 Vue 实现新增表单

在 Vue 中实现新增表单功能，通常需要结合表单绑定、数据管理和事件处理。以下是实现新增表单的步骤和示例代码。

表单数据绑定

使用 v-model 实现表单数据的双向绑定。在 Vue 的 data 中定义表单数据对象，表单输入字段通过 v-model 绑定到该对象的属性。

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

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

表单提交处理

通过 @submit 事件监听表单提交，使用 prevent 修饰符阻止默认表单提交行为。在 methods 中定义提交逻辑，例如发送数据到后端或更新本地数据列表。

<script>
export default {
  methods: {
    handleSubmit() {
      console.log('提交的数据:', this.formData);
      // 发送数据到后端或更新本地数据
      this.resetForm();
    },
    resetForm() {
      this.formData = {
        name: '',
        email: ''
      };
    }
  }
};
</script>

表单验证

可以结合 Vue 的计算属性或第三方库（如 VeeValidate）实现表单验证。以下是一个简单的本地验证示例。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" placeholder="姓名" />
    <span v-if="!isNameValid">姓名不能为空</span>
    <input v-model="formData.email" placeholder="邮箱" />
    <span v-if="!isEmailValid">邮箱格式不正确</span>
    <button type="submit" :disabled="!isFormValid">提交</button>
  </form>
</template>

<script>
export default {
  computed: {
    isNameValid() {
      return this.formData.name.trim() !== '';
    },
    isEmailValid() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(this.formData.email);
    },
    isFormValid() {
      return this.isNameValid && this.isEmailValid;
    }
  }
};
</script>

动态表单字段

如果需要动态添加或删除表单字段，可以使用数组或对象动态生成表单输入。

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in formData.fields" :key="index">
      <input v-model="field.value" :placeholder="field.placeholder" />
      <button @click="removeField(index)">删除</button>
    </div>
    <button @click="addField">添加字段</button>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        fields: [
          { value: '', placeholder: '字段1' }
        ]
      }
    };
  },
  methods: {
    addField() {
      this.formData.fields.push({ value: '', placeholder: `字段${this.formData.fields.length + 1}` });
    },
    removeField(index) {
      this.formData.fields.splice(index, 1);
    }
  }
};
</script>

表单数据提交到后端

使用 axios 或其他 HTTP 客户端将表单数据发送到后端 API。

<script>
import axios from 'axios';

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

通过以上步骤，可以在 Vue 中实现一个功能完整的新增表单，包括数据绑定、验证、动态字段和提交逻辑。