Zugang $ el innerhalb einer berechneten Eigenschaft

Question

Ich versuche, diese für den Zugriff auf $ el.offsetTop in einer berechneten Eigenschaft, sondern erhalten den Fehler:.

Cannot read property 'offsetTop' of undefined 

Wie kann ich die offsetTop der Komponente in einem Zugriff berechnete Methode? Wenn das nicht möglich ist, gibt es dann eine Alternative?

Komponente:

<template> 
    <div :class="{ 'active' : test }"></div> 
</template> 
<script> 
export default { 

    computed: { 

     test() { 
      console.log(this.$el.offsetTop); 
     } 
    } 
} 
</script> 

Answer 1

Wenn eine berechnete Eigenschaft in der Vorlage verwendet wird, dessen Methode wird vor dem Vue Beispiel feuern montiert ist, so wird this.$elundefined sein.

Wenn Ihre berechnete Eigenschaft von einer Eigenschaft der this.$el abhängt, können Sie sie auf eine Dateneigenschaft im Hook setzen (wobei this.$el definiert wird).

In Ihrem Fall:

<template> 
    <div :class="{ 'active' : test }"></div> 
</template> 

<script> 
export default { 
    data() { 
    return { offsetTop: null }; 
    }, 
    computed: { 
    test() { 
     console.log(this.offsetTop); 
    } 
    }, 
    mounted() { 
    this.offsetTop = this.$el.offsetTop; 
    } 
} 
</script>