javascript - Vue js returning wrong element height - Stack Overflow

admin管理员组

文章数量:1289402

I need to get the height of an image/element, this is what I did:

mounted() {
   this.infoHeight = this.$refs.info.clientHeight + 'px';
}

When I save then on hot reload it works, it gets the correct height but when I refresh the page it returns a smaller/wrong value. I also tried it on created() and it's the same. On other situations it doesn't even return anything.

UPDATE (Temporary solution?)

mounted() {
       setTimeout(() => this.infoHeight = this.$refs.info.clientHeight + 'px', 100);
}

I also tried using window.addEventListener('load', () => //todo) but on some ponents it worked and on others it didn't.

I need to get the height of an image/element, this is what I did:

mounted() {
   this.infoHeight = this.$refs.info.clientHeight + 'px';
}

When I save then on hot reload it works, it gets the correct height but when I refresh the page it returns a smaller/wrong value. I also tried it on created() and it's the same. On other situations it doesn't even return anything.

UPDATE (Temporary solution?)

mounted() {
       setTimeout(() => this.infoHeight = this.$refs.info.clientHeight + 'px', 100);
}

I also tried using window.addEventListener('load', () => //todo) but on some ponents it worked and on others it didn't.

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Jul 18, 2020 at 12:48 Boussadjra Brahim 1 asked Dec 31, 2019 at 15:03 Kevin BryanKevin Bryan 1,85833 gold badges2424 silver badges4848 bronze badges 2

• 1 Thanks for the update. I'm running into the exact same issue and using setTimeout in mounted fixed it for me too, now I get consistent heights when hot reloading and refreshing. – Tobberoth Commented Feb 18, 2020 at 13:29
• Thanks for the workaround, this is working while nextTick don't – Jona Commented Feb 17, 2021 at 16:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can do this now in a way cleaner fashion using a ResizeObserver.

  data: () => ({
    infoHeight: 0,
    resizeObserver: null
  }),
  mounted() {
    this.resizeObserver = new ResizeObserver(this.onResize)
    this.resizeObserver.observe(this.$refs.info)
    this.onResize()
  },
  beforeUnmount() {
    this.resizeObserver.unobserve(this.$refs.info)
  },
  methods: {
    onResize() {
      this.infoHeight = this.$refs.info.clientHeight + 'px'
    }
  }

Try with $nextTick which will execute after DOM update.

mounted() {
   this.$nextTick(() => { this.infoHeight = this.$refs.info.clientHeight + 'px' });
}

You could use this.$watch with immediate:true option :

  mounted () {
    this.$watch(
        () => {
            return this.$refs.info
        },
      (val) => {
        this.infoHeight = this.$refs.info.clientHeight + 'px'
      },
      {
        immediate:true,
        deep:true
       }
    )
  }

The above solution works only in the initial mount, the following one use MutationObserver

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: () => ({
    infoHeight: 0,
    observer: null,

    img: "https://images.ctfassets/hrltx12pl8hq/6TOyJZTDnuutGpSMYcFlfZ/4dfab047c1d94bbefb0f9325c54e08a2/01-nature_668593321.jpg?fit=fill&w=480&h=270"

  }),
  mounted() {
    const config = {
      attributes: true,
      childList: true,
      subtree: true
    };
    this.observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation) {
          this.infoHeight = this.$refs.info.clientHeight + 'px'
          console.log(" changed ", this.$refs.info.clientHeight)
        }
      });
    });
    this.observer.observe(this.$refs.info, config);


  },

  methods: {
    changeImg() {
      this.img = "https://i.pinimg./originals/a7/3d/6e/a73d6e4ac85c6a822841e449b24c78e1.jpg"
    },

  }
})

<link type="text/css" rel="stylesheet" href="//unpkg./bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <p>{{infoHeight}}</p>

  <button class="btn btn-primary" @click="changeImg">Change image</button>
  <div ref="info">
    <img :src="img" alt="image" />
  </div>
</div>

本文标签： javascriptVue js returning wrong element heightStack Overflow