vue实现表单

Vue 表单实现方法

基础表单绑定

Vue 提供了 v-model 指令实现表单元素的双向数据绑定。在组件中定义数据属性，通过 v-model 绑定到表单元素：

<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)
    }
  }
}
</script>

表单验证

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

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.email" placeholder="邮箱">
    <span v-if="errors.email">{{ errors.email }}</span>

    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: { email: '' },
      errors: { email: '' }
    }
  },
  computed: {
    isValid() {
      return !this.errors.email
    }
  },
  watch: {
    'formData.email'(newVal) {
      if (!newVal.includes('@')) {
        this.errors.email = '请输入有效的邮箱地址'
      } else {
        this.errors.email = ''
      }
    }
  },
  methods: {
    handleSubmit() {
      if (this.isValid) {
        // 提交逻辑
      }
    }
  }
}
</script>

动态表单生成

对于动态表单字段，可以使用 v-for 指令循环渲染：

<template>
  <form>
    <div v-for="(field, index) in formFields" :key="index">
      <label>{{ field.label }}</label>
      <input 
        v-model="field.value"
        :type="field.type"
        :placeholder="field.placeholder">
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { label: '姓名', type: 'text', value: '', placeholder: '请输入姓名' },
        { label: '年龄', type: 'number', value: '', placeholder: '请输入年龄' }
      ]
    }
  }
}
</script>

表单组件封装

将表单封装为可复用的组件：

<!-- FormInput.vue -->
<template>
  <div>
    <label>{{ label }}</label>
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
      :type="type"
      :placeholder="placeholder">
  </div>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    label: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: String
  }
}
</script>

<!-- 使用组件 -->
<template>
  <form>
    <FormInput
      v-model="name"
      label="姓名"
      placeholder="请输入姓名"/>
  </form>
</template>

表单提交处理

处理表单提交时通常需要阻止默认行为并进行数据验证：

<template>
  <form @submit.prevent="submitForm">
    <!-- 表单字段 -->
  </form>
</template>

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