Получить высоту элемента с Vuejs

Я хочу получить высоту div, чтобы сделать высоту другого div соответствующей ему. Я использовал метод clientHeight, но он не возвращает мне хорошее значение (меньшее значение). На самом деле, кажется, что он возвращает высоту, прежде чем все элементы будут заряжены. После некоторых исследований в Интернете я попытался поставить окно.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>
6
html javascript vue-component vue.js vuejs2

2 ответов

то, как вы это делаете, прекрасно. Но есть еще один конкретный способ vue через

16

Я бы использовал flexbox для достижения столбцов равной высоты https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
   display: flex;
}
.column {
   border: 1px solid;
   padding: 20px;
   width: 150px;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="container">
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
            sit amet ornare fringilla, ligula quam faucibus urna
        </div>
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</body>
</html>
0