Как получить высоту div с Vue

Question

Моя ситуация такова: мне нужно искать высоту компонента DIV, чтобы динамически информировать дочерний компонент о его размере.

Я пытаюсь создать режим ручной загрузки, но для некоторых Причина, по которой снимаемая высота меньше нормальной высоты.

Размер снимка составляет 318 пикселей, но правильная высота будет 393 пикселя.

Самое странное, что момент Я изменяю методы, которые ищут высоту, чередуя clientHeight и offsetHeight, автозагрузка показывает, что div получает правильную высоту, но если я обновлю страницу (F5), высота будет неправильной, а затем пересылка останется неправильной.

Vue Код

export default {
  data() {
    return {
      height: 0,
      loading: false
    };
  },
  mounted() {
    this.height = this.$refs.infoBox.clientHeight;
  }
}

HTML Код

<div class="bg-white shadow-md rounded max-w-xs mx-auto" id="info-box" ref="infoBox">
  <div class="absolute max-w-xs w-full overflow-auto bg-white opacity-50" :style="{ height: height + 'px'}" v-if="loading"></div>
  ...
</div>

Надеюсь, мне удалось объяснить проблему. Заранее спасибо

Answer 1

Всякий раз, когда вы получаете информацию из DOM, как это, выгодно использовать computed свойства:

  computed: {
    height () {
      return this.$refs.infoBox.clientHeight
    }
  }

Таким образом Vue запрашивает изменения в этой переменной, и она будет обновлена как обновления DOM. Проблема с установкой его один раз в mounted заключается в том, что этого явно не происходит. Кроме того, что вы схватили это правильно. Если это жестко заданная высота, установленная в CSS, вы также можете извлечь ее из объекта style, но это не очень хорошая идея.