In vue, use the calculation properties to calculate the clientHeight does not refresh the problem

The

page has the following modules. Click the button on the right to expand and contract:

<div class="ware-publish-floor" ref="warePublishModule">
    <sub-products-setting title="Sub Product" v-if="pSubProductInfoVO.isShow"></sub-products-setting>
    <basic-info title="Basic Info" v-if="pBasicInfoVO.isShow"></basic-info>
    <sku-info title="Sku Info" v-if="pSkuInfoListVO.isShow"></sku-info>
    <product-imgs title="Product Img" v-if="pProductImgInfoVO.isShow"></product-imgs>
    <delivery-info title="Delivery Info" v-if="pDeliveryInfoVO.isShow"></delivery-info>
    <ware-house title="Warehouse Info" v-if="pWarehouseInfoVO.isShow"></ware-house>
    <description-info title="Description Info" v-if="pDescriptionsInfoVO.isShow"></description-info>
    <account-info title="Account Info" v-if="pManAccountVO.isShow"></account-info>
    <ordiary-info title="Ordiary Info" v-if="pOrdinaryAttrInfoVO.isShow"></ordiary-info>
    <business-relate title="Business relate" v-if="pBusinessRelateInfoVO.isShow && !isVirtualSuitWare"></business-relate>
    <div class="alignright">
        <floor-nav :floor-data="floorData"></floor-nav>
    </div>
</div>

clipboard.png

then use the calculation properties to calculate the height of each module:
/ / module height data

        floorHeightList() {
            let _self = this
            let heightArr = []
            let height = 0
            this.$nextTick(() => {
                let floorList = Array.from(_self.$refs.warePublishModule.children)
                for(let i = 0, len = floorList.length - 1; i < len; iPP) {
                    height += floorList[i].clientHeight
                    heightArr.push(height)
                }
            })
            return heightArr
        },

when I switch between expanding and hiding above, the height array is not refreshed. What is the problem?

Mar.07,2021

cannot listen for the dom attribute, and the value that will not be calculated will not change.


add a change in the size of the listening window in mounted

mounted(){
    this.$nextTick(() => {
        window.addEventListener('onresize',() => {
            ....
        })
    })
}

Menu