[Vuejs]-VueJS – Get child width using $refs

by

0👍

Try using $nextTick():

this.$nextTick(
    () => { this.width = this.$refs.refName.clientWidth); }
);

This will run after finishing all of the pending Vue work and browser updates. So, it should catch the element at that point.

If that still doesn’t work (for various reasons it can be delayed beyond that point at times), you are usually stuck with a window.setTimeout() call with a kludgy delay value in it.

What is a little better in that case but more work is a window.setInterval() hander that loops waiting for the element to finally be drawn and gain a width.

One thing you cannot do is bind to that value and expect it to work. $refs is not reactive nor are any of a DOM’s element attributes.

Leave a comment