Vue uses this. $refs. Subcomponent Ref. method to report an error: cannot read property ‘resetfields’ of undefined problem

Cannot read property ‘resetfields’ of undefined problem
Problem Description:
use element to develop background system, edit and add the same pop-up box
bind the commentform object in data
in order to clear the form in the new pop-up box, use this. $refs [formname]. Resetfields()
click Add to display the pop-up box for the first time, Will report an error
“[Vue warn]: error in event handler for” click “:” typeerror: cannot read property ‘resetfields’ of undefined “”

Cause of the problem: after mounted loads the table data, the hidden pop-up box is not compiled and rendered into the dom.

So @ Click = “dialogformvisible = true; Reset form (‘dlgform ‘) “when the click pops up

r

e

f

s

and

no

yes

Get

take

reach

d

o

m

element

element

guide

To

′

r

e

s

e

t

F

i

e

l

d

s

′

o

f

u

n

d

e

f

i

n

e

d

solution

Decision

square

method

：

one

、

(

Refs does not get DOM element, resulting in ‘resetfields’ of undefined solution: 1（

Refs does not get DOM element, resulting in ‘resetfields’ of undefined solution: 1. (after next update of nexttick DOM)

        resetForm(formName) {
            this.$nextTick(()=>{
                this.$refs[formName].resetFields();
            })                
        },

2. (if you click add for the first time, there is no need to reset. It is judged according to the element undefined.)

            if (this.$refs[formName] !== undefined) {
                this.$refs[formName].resetFields();
            }

Note: a series of JS operations on DOM should be put into the callback function of Vue. Nexttick()

Read More: