欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3?+?elementPlus?reset重置表單問題

 更新時間：2022年05月27日 09:33:37   作者：jefferylong  
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3 elementPlus reset重置表單

表單需加上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 elementPlus 踩坑

表單重置按鈕resetForm失效

在項(xiàng)目過程中按照之前的經(jīng)驗(yàn)寫重置按鈕時發(fā)現(xiàn)不生效，換了原生的重置按鈕也不行。后來發(fā)現(xiàn)還是版本移植的問題。

vue2.0和vue3.0的語法不一樣，在main.js中引入resetform函數(shù)時語法出錯

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

還是要多看官方文檔?。?！

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)

    Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)

    這幾天在做項(xiàng)目時遇到微信掃描二維碼的然后進(jìn)入公眾號網(wǎng)頁巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時候，順利的一塌糊涂，然后到了蘋果端的時候，就只能出現(xiàn)一個保存圖片，然后就寫一下記錄一下這問題的解決方法
    2020-01-01
  • vue3?emits事件使用示例詳解

    vue3?emits事件使用示例詳解

    這篇文章主要為大家介紹了vue3?emits事件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-07-07
  • Vue中關(guān)閉彈窗組件時銷毀并隱藏操作

    Vue中關(guān)閉彈窗組件時銷毀并隱藏操作

    這篇文章主要介紹了Vue中關(guān)閉彈窗組件時銷毀并隱藏操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vite+vue3中require?is?not?defined問題及解決

    vite+vue3中require?is?not?defined問題及解決

    這篇文章主要介紹了vite+vue3中require?is?not?defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • 在antd Form表單中select設(shè)置初始值操作

    在antd Form表單中select設(shè)置初始值操作

    這篇文章主要介紹了在antd Form表單中select設(shè)置初始值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • VUE配置history路由模式配置詳細(xì)舉例

    VUE配置history路由模式配置詳細(xì)舉例

    這篇文章主要給大家介紹了關(guān)于VUE配置history路由模式配置的相關(guān)資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號,而是直接使用正常的路徑形式,需要的朋友可以參考下
    2023-12-12
  • 使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能

    使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能

    項(xiàng)目中有一個需要預(yù)覽下載pdf的需求,網(wǎng)上找了很久,決定使用 pdf.js 完成,下面這篇文章主要給大家介紹了關(guān)于使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • vue3+ts import引入第三方j(luò)s文件報錯的2種解決方法

    vue3+ts import引入第三方j(luò)s文件報錯的2種解決方法

    這篇文章主要給大家介紹了關(guān)于vue3+ts import引入第三方j(luò)s文件報錯的2種解決方法,在Vue中通常我們引入一個js插件都是使用npm方式下載然后import使用的,需要的朋友可以參考下
    2023-08-08
  • vue實(shí)現(xiàn)element-ui對話框可拖拽功能

    vue實(shí)現(xiàn)element-ui對話框可拖拽功能

    這篇文章主要介紹了vue實(shí)現(xiàn)element-ui對話框可拖拽功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 讓Vue響應(yīng)Map或Set的變化操作

    讓Vue響應(yīng)Map或Set的變化操作

    這篇文章主要介紹了讓Vue響應(yīng)Map或Set的變化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11

最新評論