Vue.jsで複数のdiv要素の高さを揃えたい

Question

Vue.jsで特定のクラス（.point）のついた複数のdiv要素の高さを揃えたいと思っております。
各div内のコンテンツ量に差があるためheightを指定するのではなく、他の方法で高さを揃えたいと思っております。

レンダリング後に.pointのついたdiv要素を取得してそのheightを変更したらできるかと思い以下のようなコードを作ったのですが高さがそろいません。

どこに問題がありますでしょうか？

  mounted() {
    this.$nextTick(function() {
      // 高さを揃えたい要素を取得
      const nodes = document.getElementsByClassName('point')
      let height = 0

      // 各要素の高さを取得
      for (let i = 0; i < nodes.length; i++) {
        if (height < nodes[i].getBoundingClientRect().height)
          height = nodes[i].getBoundingClientRect().height
      }

      // 一番高いやつに高さを合わせる
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].style.height = height
      }
    })

Comments

[nico25]

よく見れていないのですが...

昔、description というクラスを指定された dom の高さを
一番高いものに揃えるコードを書きました。
https://codepen.io/niconico25/pen/MWYgWrv

こちらの関数が利用できないでしょうか。
window.getComputedStyle
https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle

[Khy]

window.getComputedStyleを使用したら無事高さを揃えられました！
ありがとうございます！

[nico25]

よかったです ^^

Answer 1

最終的なコードはこちらになりました。

 mounted() {
    this.$nextTick(function() {
      // 高さを揃えたい要素を取得
      const nodes = document.getElementsByClassName('point')
      let maxHeight = '0px'

      // 各要素の高さを取得
      for (let i = 0; i < nodes.length; i++) {
        const height = window.getComputedStyle(nodes[i]).height
        if (maxHeight < height) {
          maxHeight = height
        }
      }

      // 一番高いやつに高さを合わせる
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].style.height = maxHeight
      }
    })
  }