Bagaimana untuk menyelesaikan masalah borang tetapan semula dalam vue3 dan tetapan semula elementPlus

borang set semula vue3 elementPlus

Borang perlu menambah atribut ref

Medan perlu menambah atribut 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>

rrree

vue3 elementPlus tersekat

Butang set semula borang resetForm gagal

Dalam projek, saya menulis butang set semula berdasarkan pengalaman lalu, tetapi mendapati ia tidak berfungsi dengan betul, walaupun ia telah digantikan dengan butang set semula asli Juga tidak mempunyai kesan. Kemudian didapati bahawa ia masih berkaitan dengan penghijrahan versi.

Sintaks vue2.0 dan vue3.0 adalah berbeza. Terdapat ralat sintaks semasa memperkenalkan fungsi bentuk semula dalam main.js

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

.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah borang tetapan semula dalam vue3 dan tetapan semula elementPlus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!