VueJS Get div of div

Question

私はブートストラップグリッドを使用するVueコンポーネントを持っています。子コンポーネントでは、コントローラ内の特定のdivの現在の幅を取得したいと考えています。

相続人の子コンポーネント：この例では

<template> 
    <div id="bg-prev" ref="prev"> 
     <h1>{{x}}</h1> 
    </div> 
<template> 

export default { 
    props: ['section'], 
    data() { 
    return { 
     x: 0, 
     y: 0, 
    } 
    }, 
    mounted() { 
    this.getWindowWidth(); 
    }, 
    methods: { 
    getWindowWidth() { 
     this.x = this.$refs.prev.clientWidth; 
    } 
    } 
}; 
<style> 
    #bg-prev { 
     width: 100%; 
    } 
</style> 

幅は常に、私はそれを検査する際の要素が明確な幅を有しているにもかかわらず、0になります。私はここで何が欠けていますか、マウントされたフックは、vueライフサイクルの最新のものですか？任意のヘルプは高く評価されます;）

Answer 1

いくつかのタイプミスを除いて、コードは完全に機能しています。 （閉じるテンプレートタグがありません）

追加のフックは必要ありません。実装されているメソッドでComponentのレンダリングを切り替える場合のみ例外があります。次に、あなたのようなものを使用します

const that = this 
that.showDiv = true 
that.$nextTick(function() { 
    that.getWindowWidth() 
}) 

マウント時に親が幅を持っていますか？ 0％の100％はまだ0％です。