मैं Vue.js में एक घटक तत्व की ऑफसेट हाइट कैसे प्राप्त करूं?

Question

मैं Vue.js का उपयोग कर एक घटक बना रहा हूं, और बिना किसी समस्या के इसे डोम में डाल रहा हूं। एक बार जब तत्व डोम में होता है, तो मैं इसकी रेंडर ऊंचाई जानना चाहता हूं - यानी, मैं इसे ऑफसेट हाइट प्राप्त करना चाहता हूं। मैं यह नहीं कर सकता कि इसे कैसे किया जाए - मुझे कुछ वास्तव में स्पष्ट याद आना चाहिए। यह मैं क्या कोशिश की है है:

HTML:

<!-- vue instance --> 
<div id="my-app"> 

    <my-component></my-component> 

</div> 

<!-- component template --> 
<template id="my-component"> 
    <h1>Hello World</h1> 
    <p>Lorem ipsum dolor sit amet.</h1> 
    <pre>{{ myheight }}</pre> 
</template> 

Vue जावास्क्रिप्ट:

Vue.component('my-component',{ 
    template: '#my-component', 
    computed: { 
     myheight: function(){ 
      return this.offsetHeight; 
     } 
    } 
}); 

Vue({ el: '#my-app' }); 

लेकिन यह काम नहीं करता है - 'myheight' खाली समाप्त होता है। मैंने सोचा था कि शायद समस्या यह है कि एक गणना संपत्ति मैं इस कोशिश की के उपयोग से गणना संपत्ति उत्पन्न करने के लिए कोशिश कर रहा हो सकता है किया गया है इससे पहले कि यह डोम में सम्मिलित किया गया था, इसलिए बजाय था: फिर

Vue.component('my-component',{ 
    template: '#my-component', 
    data: function(){ 
     return { 
      myheight: 999 
     }; 
    }, 
    ready: function(){ 
     this.myheight = this.offsetHeight; 
    } 
}); 

, ऐसा नहीं ' टी काम नहीं - यह कुछ भी आउटपुट नहीं करता है - और मुझे कंसोल में कोई त्रुटि या चेतावनियां नहीं मिलती हैं।

फिर, मैंने सोचा था कि शायद this एक HTMLElement नहीं था, इसलिए मैं Vue प्रलेखन खोज की, और पाया कि सभी Vue उदाहरणों एक $el संपत्ति है कि HTMLElement की ओर इशारा करना चाहिए था - या कम से कम है कि मैं इसे कैसे समझा है .. इसलिए मैंने ऊपर दिए गए दोनों उदाहरणों में this.$el.offsetHeight का उपयोग करने का प्रयास किया, लेकिन फिर से सफलता के बिना।

क्या कोई मुझे सही दिशा में इंगित कर सकता है? सभी सहायता की सराहना की जाती है ...

Answer 1

ऐसा लगता है कि यह समस्या आपके टेम्पलेट में निहित है। आपके पास fragment instance लगता है, जिसका अर्थ है कि आपके पास सभी बच्चों के चारों ओर एक शीर्ष स्तर तत्व नहीं है।

बजाय इस बात का है, जहां $el संभावना आप क्या चाहते हैं का उल्लेख करने के लिए नहीं है ...

<!-- component template --> 
<template id="my-component"> 
    <h1>Hello World</h1> 
    <p>Lorem ipsum dolor sit amet.</h1> 
    <pre>{{ myheight }}</pre> 
</template> 

... आप एक माता पिता के तत्व में अपने घटक लपेट सकता है:

<!-- component template --> 
<template id="my-component"> 
    <div class="my-component"> 
     <h1>Hello World</h1> 
     <p>Lorem ipsum dolor sit amet.</p> <!-- and close the tag correctly --> 
     <pre>{{ myheight }}</pre> 
    </div> 
</template> 

तो फिर तुम मिल सकता है this.$el.offsetHeight का उपयोग ऑफसेट-ऊंचाई:

Vue.component('my-component',{ 
    template: '#my-component', 
    data: function(){ 
     return { 
      myheight: 999 
     }; 
    }, 
    ready: function(){ 
     this.myheight = this.$el.offsetHeight; 
    } 
}); 

new Vue({ el: '#my-component' });