Search code examples
javascriptdomvue.jsvuejs2vue-component

Watch height of an element in VueJS

Is there any way to set a watcher on the height of an element in VueJS?

I am trying to fix the filters part on a search result page. but if the results change there is no way to find about it and unfix the filters.

Solution

  • You can get the height with $ref.yourElement.clientHeight, after the search result returns the data. With that, you can set the height as part of your data{} section, and from there apply a watcher. Check this example

    new Vue({
  el: '#app',
  data: {
    height: 0
  },
  methods: {
    calculateHeight() {
      this.height = this.$refs.app.clientHeight;
    }
  }
});