当前位置：首页 > VUE

vue重置按钮怎样实现

2026-02-21 01:50:41VUE

实现 Vue 重置按钮的方法

在 Vue 中实现重置按钮通常涉及表单数据的重置。以下是几种常见方法：

使用 v-model 绑定表单

通过 v-model 绑定表单数据，重置时直接重新赋值初始数据：

<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: ''
      },
      initialData: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    resetForm() {
      this.formData = {...this.initialData}
    }
  }
}
</script>

使用 ref 和 reset 方法

对于原生 HTML 表单元素，可以直接调用 reset 方法：

<template>
  <form ref="myForm">
    <input name="name" placeholder="姓名">
    <input name="email" placeholder="邮箱">
    <button @click.prevent="resetForm">重置</button>
  </form>
</template>

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

使用 Vue 表单验证库

如果使用 VeeValidate 等验证库，它们通常提供重置方法：

<template>
  <ValidationObserver ref="observer">
    <form>
      <ValidationProvider name="name" rules="required" v-slot="{ errors }">
        <input v-model="name">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
      <button @click.prevent="resetForm">重置</button>
    </form>
  </ValidationObserver>
</template>

<script>
export default {
  methods: {
    resetForm() {
      this.name = ''
      this.$refs.observer.reset()
    }
  }
}
</script>

使用计算属性实现

通过计算属性可以更灵活地控制重置逻辑：

<template>
  <form>
    <input v-model="form.name">
    <input v-model="form.age">
    <button @click="reset">重置</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      defaultForm: {
        name: '',
        age: 0
      }
    }
  },
  computed: {
    form() {
      return {...this.defaultForm}
    }
  },
  methods: {
    reset() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>