我正在尝试使用 Vue 中的数据来 react 性地设置包装器 div 的高度。当加载包装器 div 的所有子级时，将设置数据，然后将其设置为所有子级加在一起的总高度。基本上，我希望包装器在 CSS 中具有基于其所有子项组合高度的固定像素值。
我使用watch来设置数据库内容加载后的高度。下面代码中的 post 是数据库中的数组，其中包含当前组件应从中渲染的帖子数据。
watch: {
post(){
this.$nextTick(() => {
this.setTotalHeight();
})
}
}
setTotalHeight() 方法如下所示:
setTotalHeight() {
this.totalHeight = this.$refs.top.offsetHeight + this.$refs.middle.offsetHeight + this.$refs.bottom.offsetHeight
}
我还在调整大小时触发 setTotalHeight() 方法。
运行这些函数后，totalHeight 数据值将设置为 setTotalHeight() 中的计算结果所等于的数字。如果我在开发工具中查看，我可以看到该值，如果我在“DOM”中使用 {{totalHeight}} 输出该值，我可以看到它具有正确的值。
但是，当我尝试通过执行 :style="{height:totalHeight}" 将此值应用于包装器 div 时，它不会更新。我最初将 totalHeight 数据值设置为 0，这就是样式在不更改的情况下设置的值。
我是否做错了什么，或者为什么当数据本身更新并且带有 {{totalHeight}} 的“DOM”中的输出相应更新时样式绑定(bind)没有更新？样式绑定(bind)是否不是 react 性的或者可能是什么原因导致的？
最佳答案
这就像你设置一个没有单位的 CSS 高度属性 height : 1000
您需要在样式绑定(bind)的高度后面添加单位(px/em...等)，例如:
<wrapper :style="{height: totalHeight +'px'}" </wrapper>
关于javascript - 样式绑定(bind)中的数据未更新(Vue)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57242649/