Element Form form under el-tab-pane < reset / empty > operation Times error how to solve?

problem description:
this prompt is only available under el-tab-pane. If you put the code in the outer layer, you won"t get it wrong? How should this problem be solved?

error prompt:

clipboard.png

Local Code:

                <el-tab-pane v-for="item in TabType" :label="item.name" :name="item.id" :key="item.id">
                <div v-show="true ? item.id == 1 || item.id == 2 || item.id == 3 : item.id == null">
                    {{item.name}}
                </div>
                <div v-show="true ? item.id == 4 : item.id = null">
                    <div class="fxn-search">
                        <el-form :inline="true" :model="SearchForm" :rules="SearchRules" ref="SearchForm">
                            <el-form-item label="" prop="bill_no">
                                <el-select v-model="SearchForm.status">
                                    <el-option v-for="item in AvoidsStatus" :name="item.name" :key="item.id" :label="item.name" :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-button type="success"></el-button>
                            <el-button type="warning" @click="resetForm("SearchForm")"></el-button>
                        </el-form>
                    </div>
                </div>
            </el-tab-pane>
            
            
            <script>
export default {
    data(){
        return{
            activeName: "1",

            //Tab
            TabType: [
                {id: "1",name: "A"},
                {id: "2",name: "B"},
                {id: "3",name: "C"},
                {id: "4",name: "D"},
            ],

            //
            AvoidsStatus: [
                {id: 1,name: ""},
                {id: 2,name: ""},
                {id: 3,name: ""}
            ],

            //
            SearchForm: {},
            SearchRules: {},
        }
    },
    methods:{
        //Tab 
        handleClick(tab, event) {
            console.log(tab, event);
        },

        //
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted(){

    }
}
</script>
Dec.15,2021

can you try this.$ refs [formName ] or this.$refs.SearchForm to see if you've got it?

your error is this.$ refs [formName]. Invalid Fields is not a function , which is usually due to the fact that the previous object did not get it.
for example, as shown in the following figure, the situation in which you get this.$refs.loginForm is like the one below:



tab formref


this.$refs[formName]


clipboard.png

clipboard.png

: //[]reset

clipboard.png

Menu