无法使用 $el 在 Vue js 中获取 clientHeight

Question

I want to get client height of my app using this code :

mounted() {
    document.onreadystatechange = () => {
      if (document.readyState == "complete") {
        console.log("Page completed with image and files!");
        console.log(this);
        console.log(this.$el.clientHeight);
      }
    };
}

In console.log(this) I can see my main element and clientHeight of that is 702 , but console.log(this.$el.clientHeight) result is 0 .

Also I'm using Framework7 to creating my application UI.

What can I do about this problem? Any help will greatly appreciate.

Answer 1

Set a ref="potato" on your component template, if that is an valid option for you, and then console.log(this.$refs.potato.clientHeight); will give you the component height.

Answer 2

To get a component's height, @Victor Popescu answer is good.

But if client height size is needed, I think this way is better.

 new Vue({ el: '#app', data: { clientHeight: 0 }, created() { window.addEventListener('resize', this.handleResize); this.handleResize(); }, destroyed() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { this.clientHeight = window.innerHeight; } } });

 html, body, #app, section { height: 100%; } h2 { padding: 2rem 0; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <section> <h2 class="title is-2"> Height: {{ clientHeight }} </h2> </section> </div>

You can watch clientHeight also to set any other component's height.

watch: {
      clientHeight: function(val) {
          if (document.getElementById("elementId")) {
            document.getElementById("elementId").style.height = val + 'px'
          }
      }
  },