当前位置：首页 > VUE

vue如何实现form重置

2026-01-22 07:48:49VUE

表单重置方法

在Vue中实现表单重置可以通过以下几种方式实现，具体取决于使用的表单绑定方式和需求场景。

使用v-model绑定表单

通过v-model绑定的表单数据可以直接修改绑定的数据对象来重置表单。

vue如何实现form重置

<template>
  <form>
    <input v-model="formData.name" placeholder="姓名">
    <input v-model="formData.email" placeholder="邮箱">
    <button @click.prevent="resetForm">重置</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      },
      initialFormData: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    resetForm() {
      this.formData = {...this.initialFormData}
    }
  }
}
</script>

使用Vue的ref属性

通过ref获取表单DOM元素，调用原生reset方法。

vue如何实现form重置

<template>
  <form ref="myForm">
    <input name="username" type="text">
    <input name="password" type="password">
    <button @click.prevent="resetForm">重置</button>
  </form>
</template>

<script>
export default {
  methods: {
    resetForm() {
      this.$refs.myForm.reset()
    }
  }
}
</script>

使用Element UI等UI库

使用Element UI等表单组件库时，可以调用组件提供的resetFields方法。

<template>
  <el-form ref="form" :model="formData">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-button @click="resetForm">重置</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      }
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

使用VeeValidate验证库

当使用VeeValidate进行表单验证时，可以通过resetForm方法重置表单状态。

<template>
  <Form @submit="onSubmit" v-slot="{ resetForm }">
    <Field name="email" type="email" />
    <button type="button" @click="resetForm">重置</button>
  </Form>
</template>