vue3表单重置不生效

在 Vue 3 中，表单重置的方式有所变化。具体来说，可以通过使用 `v-model` 指令绑定表单数据，在重置表单时修改绑定的数据来实现表单重置。

以下是一个简单的示例：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" type="text" />
    <input v-model="form.email" type="email" />
    <button type="submit">Submit</button>
    <button type="button" @click="handleReset">Reset</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      // 处理表单提交
      console.log(this.form);
    },
    handleReset() {
      // 重置表单
      this.form = {
        name: '',
        email: '',
      };
    },
  },
};
</script>

在上面的示例中，我们使用 `v-model` 指令将输入框和表单数据绑定起来。在点击 Reset 按钮时，我们只需要将 `form` 对象重置即可实现表单重置。注意，我们使用了 `.prevent` 修饰符来阻止表单默认的提交行为。