vue.js 获取当前屏幕的宽度_用Vuejs获取元素高度

I want to get the height of a div in order to make the height of another div matching it. I used the method clientHeight, but It doesn't return me the good value (smaller value). Actually, It seems to return a height before all elements are charged.

After some research online, I tried to put a window.load() to delay until everything is charged but it doesn't work as well. Some ideas ?

mounted () {

this.matchHeight()

},

matchHeight () {

let height = document.getElementById('info-box').clientHeight

}

Some text

some list

解决方案

The way you are doing it is fine. But there is another vue specific way via a ref attribute.

mounted () {

this.matchHeight()

},

matchHeight () {

let height = this.$refs.infoBox.clientHeight;

}

Some text

>

some list

In this case, since you are just getting the value it really doesn't matter whether you use your original getElementById approach or the vue specific ref approach. However if you were setting the value on the element then it's much better to use the ref approach so that vue understands that the value has changed and won't possibly overwrite the value with the original value if it needs to update that node in the DOM.

Update

A few people had left comments that the above solution didn't work for them. That solution provided the concepts but not full working code as example, so I have augmented my answer with the code below which demonstrates the concepts.

var app = new Vue({

el: '#app',

data: function () {

return {

leftColStyles: { },

lines: ['one', 'two','three']

}

},

methods: {

matchHeight() {

var heightString = this.$refs.infoBox.clientHeight + 'px';

Vue.set(this.leftColStyles, 'height', heightString);

}

},

mounted() {

this.matchHeight();

}

});

.columns{width:300px}

.left-column {float:left; width:200px; border:solid 1px black}

.right-column {float:right; border:solid 1px blue; }

Some text

Here is a screenshot of the results in the browser: