數據未在樣式綁定（Vue）中更新

Question

我正在嘗試使用Vue中的數據來反應性地設置包裝div的高度。 當包裝器div的所有子代均加載時設置數據，然后將其設置為所有加在一起的總高度。 基本上，我希望包裝器在CSS中基於其所有子級的總高度合並一個固定的像素值。

在裝入數據庫中的內容之后，我使用watch來設置高度。 以下代碼中的post是數據庫中的數組，其中包含當前組件應從中渲染的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>