How to solve the problem of reset form in vue3 and elementPlus reset

vue3 elementPlus reset reset form

The form needs to add the ref attribute

The field needs to add the prop attribute

<template>
  <div class="main">
    <el-form ref="resetFormData" :model="formInline">
      <el-form-item label="姓名" prop="customerName">
        <el-input
          v-model="formInline.customerName"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-button type="warning" @click="resetForm">重置</el-button>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  setup() {
    const resetFormData = ref(null);
    const formInline = reactive({});
    
    const resetForm = () => {
      resetFormData.value.resetFields();
    };
    return {
      resetForm,
      resetFormData,
      formInline,
    };
  },
});
</script>

vue3 elementPlus pitfall

Form reset button resetForm invalid

In the project, I wrote a reset button based on past experience, but found that it did not work properly, even if it was replaced with a native reset button Also has no effect. Later it was discovered that it was still a matter of version migration.

The syntax of vue2.0 and vue3.0 is different. There is a syntax error when introducing the resetform function in main.js

// Vue2.0 
Vue.prototype.resetForm = resetForm;
 
//Vue3.0 
let app = createApp(App);
 
//... 
app.config.globalProperties.resetForm = resetForm;

The above is the detailed content of How to solve the problem of reset form in vue3 and elementPlus reset. For more information, please follow other related articles on the PHP Chinese website!