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()中的计算所等于的数字。如果查看开发工具，就可以看到该值，如果在“ DOM”中用{{totalHeight}}输出该值，则可以看到正确的值。

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

我是对此做错什么还是为什么在数据本身正在更新并且带有{{totalHeight}}的“ DOM”中的输出相应地更新时样式绑定没有更新？样式绑定不是被动的，还是可能导致这种情况？

Answer 1

您是否在身高值上添加了“ px”？如果没有，请尝试以下操作：

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

Answer 2

就像您要设置CSS高度属性，不设置单位height : 1000

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

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

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

2 个答案: