样式绑定中的数据未更新（Vue）

Question

我正在尝试使用 Vue 中的数据被动地设置包装器 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()等于的数字。如果我查看开发工具，我可以看到该值，如果我{{totalHeight}}在“DOM”中输出该值，我可以看到它具有正确的值。

但是，当我尝试通过执行 将此值应用于包装器 div 时:style="{height: totalHeight}"，它不会更新。我最初将totalHeight数据值设置为0，这就是将样式设置为从未更改的样式。

我做错了什么，或者为什么当数据本身正在更新并且“DOM”中的输出相应地更新时，样式绑定没有更新{{totalHeight}}？样式绑定不是反应性的还是可能导致这种情况的原因？

Answer 1

就像你设置一个没有单位的 CSS 高度属性一样 height : 1000

您需要在样式绑定（px/ em...等）的高度之后添加单位，例如：

<wrapper :style="{height: totalHeight +'px'}" </wrapper> 

Answer 2

您是否将“px”添加到您的高度值中？如果没有，请尝试以下操作：

:style="{height:totalHeight+'px'}"