Nuxt•2y ago

Computed Property Not Returning offsetHeight

I'm trying to return the new height of an element when it changes within a computed property. I can see the console.log of the new height after the DOM loads in onMounted, but after this if I try to rescale my browser window it never computes again. All the while I can inspect the element and see that the height has changed. What am I missing here?

const background_video = ref(null)

onMounted(() => {
  if (background_video.value) {
    console.log('background_video.value.offsetHeight: ', background_video.value.offsetHeight)
  }
})

const overlay_height = computed(() => {
  console.log('overlay_height: ', background_video.value?.offsetHeight - 128)
  return background_video.value?.offsetHeight - 128
})

const background_video = ref(null)

onMounted(() => {
  if (background_video.value) {
    console.log('background_video.value.offsetHeight: ', background_video.value.offsetHeight)
  }
})

const overlay_height = computed(() => {
  console.log('overlay_height: ', background_video.value?.offsetHeight - 128)
  return background_video.value?.offsetHeight - 128
})

const background_video = ref(null)

onMounted(() => {
  if (background_video.value) {
    console.log('background_video.value.offsetHeight: ', background_video.value.offsetHeight)
  }
})

const overlay_height = computed(() => {
  console.log('overlay_height: ', background_video.value?.offsetHeight - 128)
  return background_video.value?.offsetHeight - 128
})

const background_video = ref(null)

onMounted(() => {
  if (background_video.value) {
    console.log('background_video.value.offsetHeight: ', background_video.value.offsetHeight)
  }
})

const overlay_height = computed(() => {
  console.log('overlay_height: ', background_video.value?.offsetHeight - 128)
  return background_video.value?.offsetHeight - 128
})

Computed Property Not Returning offsetHeight

Similar Threads

Similar Threads

Similar Threads