Как получать динамически высоту блока в vue?

Question

[MeMoJlor]

Здравствуйте, подскажите как правильно получать динамически высоту блока? На ум приходит setInterval, но думаю что плохая идея. Еще, есть ли смысл использовать computed вместо methods?

<template>
  <section ref='height'>
    <div class="slider-text">
      <h1>TEXT</h1>
      <span>lorem ipsum</span>
    </div>
  </section>
</template>

<script>
export default {

  name: 'MainSlider',
  data () {
    return {
    }
  },
  methods: {
    watchHeight() {
      console.log(this.$refs.height.clientHeight)
    }
  },
  mounted(){
    this.watchHeight() 
  }
}
</script>

Answer 1

[Арсений Матыцин]

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

Answer 2

[artloveyou]

methods: {
    resizeHandler(e) {
      console.log(this.$refs.height.clientHeight)
    }
  },

  created() {
      window.addEventListener("resize", this.resizeHandler)
  },
  destroyed() {
      window.removeEventListener("resize", this.resizeHandler)
  },