this.$refs returning undefined in a Nuxt application (trying to read the height of a div)-CodePudding

I want to give the same height to a div containing Component2 as another div (modelDiv) containing Component1.

<template>
  <div>
    <div v-if="showMe">
      <div ref="modelDiv">
        <Component1/>
      </div>
    </div>
    <div v-else>
      <div :style="setDivHeight">
        <Component2/>
      </div>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      displayMe: true,
      elementHeight: null,
    }
  },
  computed: {
    showMe() {
      return this.displayMe
    },
    setDivHeight() {
      return `height: ${this.elementHeight}px;`
    },
  },

  mounted() {
    this.$nextTick(function () {
      this.elementHeight = this.$refs.modelDiv[0].$el.clientHeight
    })
  },
}
</script>

I am having this error message TypeError: Cannot read properties of undefined (reading '$el') and console.log('the height', this.$refs) gives me modelDiv: undefined. I can't figure out why. Any help is welcome.

CodePudding user response：

That should work:

this.elementHeight = this.$refs.modelDiv.clientHeight;

Demo: https://codesandbox.io/s/ref-kloqu?file=/src/App.vue

CodePudding user response：

Since I see only see one div with ref as modelDiv, jus try using one of the below options amd see if that works

this.elementHeight = this.$refs.modelDiv.$el.clientHeight

this.elementHeight = this.$refs.modelDiv.clientHeight