[Vuejs]-Vuetify dynamic height for v-img

by

0đź‘Ť

âś…

The solution is to do a mix between computed and methods like so:

data() {
  return {
    mounted: false,
    containerHeight:
      document.getElementById('photoWrapper').offsetHeight - 120
  }
},
computed: {
  wrapperHeight() {
    if (!this.mounted) return
    const height = this.containerHeight
    return height
  }
},
mounted() {
  this.mounted = true
  window.addEventListener('resize', _.debounce(this.handleResize, 100))
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.containerHeight =
      document.getElementById('photoWrapper').offsetHeight - 120
  }
}

0đź‘Ť

I think you have to return the ${height}px in the wrapperHeight method

0đź‘Ť

You need to make your wrapperHeight is a computed property. That is correct and more performance than create it like method.

computed: {
      wrapperHeight() {
          if (!this.mounted) return
          console.log(document.getElementById('photoWrapper').offsetHeight - 120)
          const height = document.getElementById('photoWrapper').offsetHeight - 120
          return height
      }
  }

And
:max-height=”wrapperHeight” not :max-height=”wrapperHeight()”

Leave a comment