你正在做它的方式是好的。但是通过ref
属性还有另外一种具体的方法。
mounted() {
this.matchHeight()
},
matchHeight() {
let height = this.$refs.infoBox.clientHeight;
}
<div class="columns">
<div class="left-column" id="context">
<p>Some text</p>
</div>
<div class="right-column" id="info-box" ref="infoBox"></>
<img />
<ul>
some list
</ul>
</div>
</div>
在这种情况下,因为你是刚刚起步的价值真的不要紧,你是否使用原来的getElementById
方法或VUE具体ref
方法。但是,如果您在元素上设置值,那么使用ref
方法好得多,这样vue就会明白该值已更改,并且如果需要更新DOM中的该节点,则不会使用原始值覆盖该值。
您可以在这里了解更多:https://vuejs.org/v2/api/#vm-refs
更新
有几个人已经离开评论说,上述方案并没有为他们工作。该解决方案提供了概念,但没有提供完整的工作代码作为示例,所以我用下面的代码展示了我的答案,它演示了这些概念。
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; }
<div id="app">
<div class="columns">
<div class="left-column" id="context" v-bind:style="leftColStyles">
<p>Some text</p>
</div>
<div class="right-column" id="info-box" ref="infoBox">
<img />
<ul>
<li v-for="line in lines" v-text="line"></li>
</ul>
</div>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
这里是在浏览器中结果的截图:
https://stackoverflow.com/a/526352/2316112 –
你能创建一个再生产?它似乎工作得很好:https://jsfiddle.net/wostex/63t082p2/84/(如果你从你的方法当然返回高度,因为在你的代码中你什么都不返回)。 – wostex
其实我的组件有很多线条和方法。我在这里简化了它。但我不明白为什么它返回的数字小于实际高度(检查元素时)。这是一个加载问题吗? 不应该加载时运行该方法吗? –