样式绑定 (Vue) 中的数据未更新答案

【问题标题】：Data not updating in style binding (Vue)样式绑定 (Vue) 中的数据未更新
【发布时间】：2019-12-06 03:11:58
【问题描述】：

我正在尝试使用 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”中的输出相应地更新？样式绑定不是响应式的还是可能导致这种情况的原因？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您是否在身高值中添加了“px”？如果没有，试试这个：

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

【讨论】：

嗯。我认为 Vue 会自动添加“px”，因为从一开始的原始数据值只是一个数字，但在我的例子中，在元素的内联样式中显示为“0px”。但我会试试看。

【解决方案2】：

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

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

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

【讨论】：

我看到你先评论了，所以正确答案点给你。 :) 就像我上面提到的，totalHeight 从一开始就设置为Number，并在呈现的HTML 中显示为<div style="height: 0px;">，并添加了“px”。所以看起来 Vue 会自动添加“px”，但不会以反应的方式更新值。如果您手动添加“px”，该样式似乎只会变得被动。
是的 .. 实际上 vue 不会自动添加它....如果您不添加“px” ...您给“height”的任何值都将被隐式强制为“ 0px" 导致绑定数字不是有效的输入，并且由于您已经绑定了属性，因此 vue 将其转换为 0 可能比抛出错误更好......顺便说一句，这对我来说发生了很多。
啊，我明白了！所以我的初始数据值设置为0 只是一个巧合。如果我理解正确，它会被设置为0px 吗？无论如何，感谢您的信息和帮助！
他们说Vue易于调试，我什至在浏览器开发工具中都没有找到损坏的height : 1000