我正在使用Vue.js创建一个组件,并且没有遇到任何问题将其插入DOM中。一旦元素在DOM中,我想知道它的渲染高度 - 即我想获取它的offsetHeight。我无法弄清楚如何做到这一点 - 我一定错过了什么非常明显的东西。这是我的尝试:
HTML:
<!-- vue instance -->
<div id="my-app">
<my-component></my-component>
</div>
<!-- component template -->
<template id="my-component">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet.</h1>
<pre>{{ myheight }}</pre>
</template>
Vue JavaScript:
Vue.component('my-component',{
template: '#my-component',
computed: {
myheight: function(){
return this.offsetHeight;
}
}
});
Vue({ el: '#my-app' });
但它并没有起作用 - 'myheight' 最终为空。我觉得问题可能是在尝试生成计算属性之前,它可能已经被插入到 DOM 中,因此我不使用计算属性而是尝试这样做:
Vue.component('my-component',{
template: '#my-component',
data: function(){
return {
myheight: 999
};
},
ready: function(){
this.myheight = this.offsetHeight;
}
});
再试了一遍,还是不行 - 它没有输出任何东西 - 而且在控制台中我没有收到任何错误或警告。
然后,我想也许 this
不是一个 HTMLElement,所以我查阅了 Vue 文档,并发现所有 Vue 实例都应该有一个指向 HTMLElement 的 $el
属性 - 或者至少这是我的理解... 所以我尝试在上面两个例子中使用 this.$el.offsetHeight
,但同样没有成功。
有人能指点我正确的方向吗?非常感谢所有的协助...