vue3のリセットフォームとelementPlusのリセットの問題を解決する方法

vue3 要素プラス リセット リセット フォーム

フォームには ref 属性を追加する必要があります

フィールドには 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>

vue3 要素プラスの落とし穴

フォーム リセット ボタン リセットフォームが無効です

プロジェクトで、過去の経験に基づいてリセット ボタンを作成しましたが、置き換えても正常に動作しないことがわかりました。ネイティブのリセットボタンを使用しても効果はありません。その後、それはまだバージョンの移行の問題であることが判明しました。

vue2.0とvue3.0の構文が異なります。main.js

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

にresetform関数を導入する際に構文エラーがあります。

以上がvue3のリセットフォームとelementPlusのリセットの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。