Vuejsで要素の高さを取得

Question

divに一致する別のdivの高さを作るためにdivの高さを取得したいと思います。私はメソッドclientHeightを使用しましたが、それは私に良い値（小さな値）を返しません。実際には、すべての要素が充電される前に高さを返すようです。 オンラインでいくつかの調査をしたところ、すべてが請求されるまでwindow.load（）を遅らせてみましたが、うまくいきませんでした。いくつかのアイデア？

mounted() { 
 
    this.matchHeight() 
 
}, 
 
matchHeight() { 
 
    let height = document.getElementById('info-box').clientHeight 
 
}

<div class="columns"> 
 
    <div class="left-column" id="context"> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div class="right-column" id="info-box"> 
 
    <img /> 
 
    <ul> 
 
     some list 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

あなたはそれをやっている方法で結構です。しかし、ref属性を介して別のvue固有の方法があります。この場合

<div class="columns"> 
     <div class="left-column" id="context"> 
      <p>Some text</p> 
     </div> 
     <div class="right-column" id="info-box" ref="infoBox"></> 
      <img /> 
      <ul> 
       some list 
      </ul> 
     </div> 
    </div> 

mounted() { 
    this.matchHeight() 
}, 
matchHeight() { 
    let height = this.$refs.infoBox.clientHeight; 
} 

、あなただけの値を取得しているので、本当にあなたがあなたの元 getElementByIdアプローチまたはVUE特定 refアプローチを使用するかどうかは関係ありません。しかし、要素の値を設定していた場合は、 refアプローチを使用する方がはるかに優れているため、値が変更されたことをvueが認識し、DOM内のそのノードを更新する必要がある場合は、 。 https://vuejs.org/v2/api/#vm-refs

更新

少数の人々は、上記のソリューションが彼らのために動作しなかったというコメントを残した：

あなたはここで多くを学ぶことができます。このソリューションはコンセプトを提供していましたが、完全な作業コードは例ではありませんでしたので、以下のコードで私の答えを補強しました。ここで

var app = new Vue({ 
 
    el: '#app', 
 
    data: function() { 
 
     return { 
 
      leftColStyles: { }, 
 
      lines: ['one', 'two','three'] 
 
     } 
 
    }, 
 
    methods: { 
 
     matchHeight() { 
 
      var heightString = this.$refs.infoBox.clientHeight + 'px'; 
 
      Vue.set(this.leftColStyles, 'height', heightString); 
 
     } 
 
    }, 
 
    mounted() { 
 
     this.matchHeight(); 
 
    } 
 

 
});

.columns{width:300px} 
 
.left-column {float:left; width:200px; border:solid 1px black} 
 
.right-column {float:right; border:solid 1px blue; }

<div id="app"> 
 
    <div class="columns"> 
 
     <div class="left-column" id="context" v-bind:style="leftColStyles"> 
 
      <p>Some text</p> 
 
     </div> 
 
     <div class="right-column" id="info-box" ref="infoBox"> 
 
      <img /> 
 
      <ul> 
 
       <li v-for="line in lines" v-text="line"></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 

 
</div> 
 

 
<script src="https://unpkg.com/vue@2.2.5/dist/vue.min.js"></script> 
 

ブラウザでの結果のスクリーンショットです：