this.$refs.xxx, Error in mounted hook “Error Initialize failed invalid dom.“

problem¶

Recently, I encountered an error when using echarts in the vue project.

Error in mounted hook: "Error: Initialize failed: invalid dom."

This error is that the dom element is not ready, but I initialized echarts in mouted, which should not be reported.

Reason and Solution¶

I checked the code repeatedly, and there was no problem. Finally, I found that this.refs.chart−1 was printed as NaN . . . However, when I printed the this.refs in console, I saw that there was a chart-1 object in it. Finally I renamed chart-1 to chart1, the problem is solved.

To summarize it, the name bound to the ref attribute should not have special symbols! !