Shulou(Shulou.com)06/01 Report--

In this article Xiaobian introduces in detail "how to solve the problem of the use of ref in vue", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to solve the problem of the use of ref in vue" can help you solve your doubts.

Ref of vue (this.$refs is obtained as undefined)

If what you get is always empty, pay attention to this:

1. Where do you call, and the object you call

Try to see if the call in mounted () works.

Whether the called object already exists, or it will not appear until the data is rendered. Similarly, call it in mounted () to have a look.

two。 Is the calling object an array list?

I started by setting ref on the v-for list and getting this.$refs.name.style directly, which is always empty.

It was later discovered that this.$refs.name is an array and that styles cannot be obtained through .style

You can only traverse this this.$refs.name array and set the style on this.$ refs.name [index]

/ / 6.14 update, there is something wrong with this statement

But things like height and width can be obtained through offsetHeight, etc.

3. Whether the calling object is used in conjunction with v-if

Ref is not responsive, and all dynamically loaded template updates cannot be changed accordingly.

Solution:

Pass through

SetTimeout (() = > {}, 0)

To get the data.

There are several points to note about the $refs attribute of vue. To get dom in vue, it is recommended to use $refs to get

However, there are times when the this.$refs.xxx is undefined.

Scenario 1: used in created ()

During this life cycle, data observation, property and method operations, and watch event callbacks are performed. But the page has not been mounted, there is no e l attribute, t h i s. El property, this.el property, this.refs cannot call dom.

Solution: use it in mounted () instead

Scenario 2: parent or current element uses v-if or v-show

Because $refs is not responsive and takes effect only after the component rendering is complete, it does not exist at the time of the initial rendering.

Because it is non-responsive, none of the dynamically loaded template updates can change accordingly.

Solution: you can use setTimeout () = > {… }, 0) to implement.

two。 If you use v-for

When traversing plus ref, you can use:, that is, ref = "variable", so you get a different ref.

/ / this.$refs [`index {index} `] each item is an array this.$refs [`refName$ {index}`] [0] .fun () containing only one element; / / call the method in the first component

But you don't have to use:, the resulting ref will be an array of these subcomponents of the corresponding data source.

/ / this.$refs.refName is an array this.$refs.refName [0] .fun () that contains these subcomponents of the corresponding data source. / / call the method in the first assembly to read here. This article "how to solve the problem of using ref in vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.