Vue single page development – pit: $refs sometimes not get, error!

The background reasons

Recently, VUE developed a new project and made a login failure function. However, the front end error often appeared in this function, which led to the problem that the code could not run and could not be returned. The reason is that I want to get elements through $refs in the VUE project, but sometimes I can’t get the BUG. After querying the data, I learned that the BUG is caused by the DOM node and the asynchronous loading mechanism.

Solve the archives

1. this.$nextTick

Since refs are not reactive, we need refs to be non-reactive, so we need nextTick to be asynchronous.

2. Sometimes an error is reported even if it is added. The reason: V-for loops get more than one

$refs[refName][0] this.$refs[refName][0

3. v-if

Sometimes the node does not exist and cannot be retrieved due to the use of V-if. The solution is to hide the component by v-show instead