vue实现提交表单例子

基本表单实现

在Vue中实现表单提交通常结合v-model进行数据双向绑定，并通过@submit事件处理提交逻辑。以下是一个基础示例：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" placeholder="用户名" />
    <input v-model="formData.password" type="password" placeholder="密码" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.formData);
      // 此处可调用API发送数据
    }
  }
};
</script>

表单验证

使用Vuelidate或原生验证确保输入合法性：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.email" @blur="$v.email.$touch()" />
    <span v-if="$v.email.$error">请输入有效邮箱</span>
    <button type="submit" :disabled="$v.$invalid">提交</button>
  </form>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators';
export default {
  data() {
    return { email: '' };
  },
  validations: { email: { required, email } },
  methods: {
    handleSubmit() {
      if (!this.$v.$invalid) {
        console.log('验证通过');
      }
    }
  }
};
</script>

异步提交与反馈

结合Axios发送数据并处理响应：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.name" />
    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? '提交中...' : '提交' }}
    </button>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </form>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      formData: { name: '' },
      isSubmitting: false,
      errorMessage: ''
    };
  },
  methods: {
    async submitForm() {
      this.isSubmitting = true;
      try {
        const response = await axios.post('/api/submit', this.formData);
        console.log('成功:', response.data);
      } catch (error) {
        this.errorMessage = '提交失败: ' + error.message;
      } finally {
        this.isSubmitting = false;
      }
    }
  }
};
</script>

动态表单字段

根据需求动态增减表单项：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(item, index) in formData.items" :key="index">
      <input v-model="item.value" />
      <button @click="removeItem(index)">删除</button>
    </div>
    <button @click="addItem">新增字段</button>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: { items: [{ value: '' }] }
    };
  },
  methods: {
    addItem() {
      this.formData.items.push({ value: '' });
    },
    removeItem(index) {
      this.formData.items.splice(index, 1);
    },
    handleSubmit() {
      console.log('动态数据:', this.formData);
    }
  }
};
</script>

以上示例覆盖了基础表单、验证、异步提交及动态字段等常见场景，可根据实际需求调整逻辑。