Vue.js通过refs获取div高度报错问题求助

Hey there! Let's break down why you're seeing that error when trying to get your div's height, and how to fix it.

First, let's spot a quick syntax mistake in your code: clientHeight is a read-only property, not a method. So you shouldn't call it with (). That's one small fix right there!

But the main issue is that you're trying to access this.$refs.infoBox before the DOM element has been mounted or rendered. Vue refs don't get populated until the component is attached to the DOM, and if your element is conditionally rendered (like with v-if) or depends on async data, it might not exist when you try to access it.

Here's how to fix this step by step:

1. Use the right lifecycle hook #

Always access refs in the mounted hook—this is when your component has fully mounted to the DOM, and refs for static elements will be available.

<template>
  <div ref="infoBox">Your content here</div>
</template>

<script>
export default {
  mounted() {
    // Add a check to avoid errors if the ref doesn't exist
    if (this.$refs.infoBox) {
      const height = this.$refs.infoBox.clientHeight + 'px';
      console.log('Div height:', height);
    }
  }
}
</script>

2. Handle async or conditionally rendered content #

If your infoBox div only appears after async data loads (like from an API) or is toggled with v-if, mounted might run before the element is rendered. In this case, use $nextTick to wait for the DOM to update:

<template>
  <div ref="infoBox" v-if="hasContent">
    {{ asyncContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      asyncContent: '',
      hasContent: false
    }
  },
  mounted() {
    // Simulate an API call
    fetch('/your-api-endpoint')
      .then(res => res.text())
      .then(data => {
        this.asyncContent = data;
        this.hasContent = true;
        
        // Wait for Vue to update the DOM
        this.$nextTick(() => {
          if (this.$refs.infoBox) {
            const height = this.$refs.infoBox.clientHeight + 'px';
            console.log('Updated div height:', height);
          }
        });
      });
  }
}
</script>

3. Always add a null check #

Even if you think the ref should exist, adding a quick if (this.$refs.infoBox) check prevents unexpected errors if the element is removed or not rendered for some reason.

Quick recap of common pitfalls #

• ❌ Don't access refs in the created hook—DOM isn't mounted yet
• ❌ Don't call clientHeight() (it's a property, not a method)
• ✅ Use mounted for static elements
• ✅ Use $nextTick for async/conditionally rendered elements
• ✅ Add null checks to avoid runtime errors

内容的提问来源于stack exchange，提问作者Puja