Comment résoudre le problème de réinitialisation du formulaire dans vue3 et elementPlus reset

vue3 elementPlus réinitialiser le formulaire de réinitialisation

Le formulaire doit ajouter l'attribut ref

Le champ doit ajouter l'attribut prop

<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>

piège vue3 elementPlus

Le bouton de réinitialisation du formulaire resetForm n'est pas valide

Dans le projet, selon le passé, j'ai écrit un bouton de réinitialisation par expérience, mais j'ai constaté qu'il ne fonctionnait pas correctement et que même le remplacer par un bouton de réinitialisation natif n'avait aucun effet. Plus tard, on a découvert qu'il s'agissait toujours d'une question de migration de version.

La syntaxe de vue2.0 et vue3.0 est différente. Il y a une erreur de syntaxe lors de l'introduction de la fonction resetform dans main.js

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

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!