当前位置：首页 > VUE

vue重置按钮功能实现

2026-01-20 01:46:17VUE

Vue 重置按钮功能实现

在 Vue 中实现重置按钮功能通常涉及将表单数据恢复到初始状态或清空用户输入。以下是几种常见的实现方法：

方法一：使用 `v-model` 和初始数据绑定

定义表单数据的初始状态，在重置时重新赋值。

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

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

方法二：使用 Vue 的 `$refs` 和原生表单重置

通过引用表单元素并调用原生 reset 方法。

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

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

方法三：使用 Vuex 状态管理

当表单数据存储在 Vuex 中时，可以通过 mutation 重置状态。

// store.js
const store = new Vuex.Store({
  state: {
    form: {
      name: '',
      email: ''
    }
  },
  mutations: {
    RESET_FORM(state) {
      state.form = { name: '', email: '' }
    }
  }
})

// 组件中
methods: {
  resetForm() {
    this.$store.commit('RESET_FORM')
  }
}

方法四：动态组件重新加载

通过强制重新加载组件来重置所有状态。

<template>
  <form :key="componentKey">
    <!-- 表单内容 -->
    <button @click="resetForm">重置</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    resetForm() {
      this.componentKey += 1
    }
  }
}
</script>