this.$ How to solve the problem when refs is undefined?

First, you should know this.$refs What is it ？

ref There are three uses ：

1、ref Add to common elements , use this.$refs.name What you get is dom Elements

2、ref Add to the subcomponent , use this.$refs.name Get the component instance , You can use all the methods of the component

3、 utilize v-for and ref You can get a set of arrays or dom node  

When v-for For elements or components , The reference will contain DOM An array of node or component instances .

ref Itself is created as a result of rendering , You can't access them during the initial rendering --- Because they don't exist yet ;$refs It's not reactive either , So you can't try to use it for data binding in a template

What you get is always undefined Of

1、 Where did you call it , And the object you call

Try at mounted() Is there any effect of calling inside ;

The called object itself exists , It still needs data rendering ; In the same way mounted() It calls , Or in this.$nextTick( () => { ... } ) call

2、 Whether the called object is the same as v-for Use a combination of , Or whether the calling object is an array list

If I set it now ref stay v-for On , Direct access to this.$refs.name.style, It's always empty ;

because this.$refs.name Is an array , Unable to get .style obtain ;

You can dynamically bind ref And use v-for, Use this.$refs[refName][index] obtain ;

3、 Whether the called object is the same as v-if Use a combination of

ref Not reactive , All dynamically loaded templates cannot be updated accordingly ;

solve ： Replace with v-show that will do