단일 파일 구성 요소로 vm. $ el 등록 정보에 액세스하는 방법은 무엇입니까?

Question

단일 파일 구성 요소에 의해 생성 된 vue 인스턴스의 clientHeight 속성에 액세스하려고하지만 undefined를 반환합니다. 어떻게해야합니까? 이 마운트되어 후 this.$el 그래서 당신이 실제로 this.$el.clientHeight를 원하는 것과는 mounted의 후

<template lang='jade'> 
    article#article.projectCard.relative.mb5.pa5(v-bind:style="styleObject") 
    h3 {{ project.projectName }} 
    p {{ project.projectDescription }} 
</template> 

    <script> 
    export default { 
     props: { 
     project: '', 
     }, 

     data() { 
     return { 
      styleObject: { 
      backgroundColor: this.project.projectMainColor, 
      height: '80vh' 
      }, 
      cardHeight: this.clientHeight, 
     }; 
     }, 
</script> 

Answer 1

당신은 요소에 액세스 할 수 있습니다.

data() { 
    return { 
    cardHeight: 0, 
    } 
} 

가 다음을 수행하십시오 :

당신은 같이 할 수있는 또

mounted() { 
    this.cardHeight = this.$el.clientHeight + 'px' 
} 

을 styleObject는 계산 된 속성으로 더 잘 될 것이라고. 그런 식으로 변경되면 자동으로 업데이트됩니다.

나는 개인적으로 할 거라고 :

data() { 
    return { 
    cardHeight: '80vh', 
    } 
}, 

mounted() { 
    this.cardHeight = this.$el.clientHeight + 'px' 
}, 

computed: { 
    styleObject() { 
    return { 
     backgroundColor: this.project.projectMainColor, 
     height: this.cardHeight, 
    } 
    } 
}