Vue js 마운트된 특정 div로 스크롤

Vue js 마운트된 특정 div로 스크롤

이 스크립트를 찾았는데 버튼을 클릭하시면 정상적으로 동작합니다.내가 원하는 것은 페이지가 특정 div로 자동 스크롤되는 것이다.

어떻게 하면 될까요?

<button id="goto" @click="goto('porto')">Go to porto</button>

<div class="page" ref="porto">
    Porto page
</div>

methods: {
    goto(refName) {
        var element = this.$refs[refName];
        console.log(element);
        var top = element.offsetTop;
        window.scrollTo(0, top);
    }
},

마운트된 것은 렌더 후에 호출되지만 마운트 상에서 바로 스크롤하려고 하면 스크롤이 작동하지 않을 수 있습니다.

타임아웃이 없는 심플한 set Timeout이 효과가 있습니다.이것은 보기 흉할 수도 있지만, 매력적으로 기능합니다.

mounted() {
 setTimeout(() => {
  scrollToDiv();
 })
}

Vue에서는 라이프 사이클 훅을 사용할 수 있습니다.

설치 후크 같은 거.

mounted:{
  this.goto('porto')
}

언급URL : https://stackoverflow.com/questions/47616393/vue-js-mounted-scroll-to-specific-div