VueJs - 데이터 변경 시 아래로 스크롤하는 방법

VueJs - 데이터 변경 시 아래로 스크롤하는 방법

내 컴포넌트에는 메시지 배열이 있습니다.

data: function () {
        return {
            messages: [],
            first_load: false
            ...
        }

이 메시지 배열은 처음에 컴포넌트 작성 후 Ajax 호출로 채워집니다.서버에서 데이터를 가져온 후 messages 변수에 푸시하면 UI의 모든 메시지가 놀라울 정도로 그려지지만 푸시된 후에는 UI를 아래로 스크롤하여 사용자가 최신 콘텐츠만 볼 수 있도록 합니다.

data.body.data.messages.map((message) => {
    this.messages.push(message)
}
this.scroll_bottom()

데이터를 푸시한 직후에 간단한 javascript 스크롤 보텀라인을 실행해도 UI가 비동기적으로 리프레쉬(배열을 .push 했을 때 UI를 동기화하기 전에 다음 행이 실행되지 않음)하여 타임아웃을 추가하고 보텀 스크롤을 하게 되었지만, 이것은 매우 부끄러운 일이라고 생각합니다.

내 해킹:

watch: {
    messages:{
        handler: function (val, oldVal) {
            if (!this.first_load) {
                this.first_load = true
                setTimeout(() => {
                    this.scroll_bottom()
                }, 1000);
            }
        },
        deep: true
    }
}

이걸 어떻게 활용할지 생각나는 거 없어?감사합니다!

사용할 수 있습니다.updated라이프 사이클 훅을 사용하여 DOM 업데이트 후 작업을 수행합니다.공식 문서를 참조하십시오.

updated: function () {
    //scroll down logic here
}

만약 당신이updated로직이 빠르게 호출되고 있기 때문에 언제든지 적절한 비난 방법을 사용하여 속도를 늦출 수 있습니다.

그 시계가 올바른 접근법이라고 생각합니다만, 한번 사용해 보세요.Vue.nextTick또는this.$nextTick(현재 컴포넌트 업데이트 주기만 반복하기 위해) 타임아웃 대신:

watch: {
    messages: function (val, oldVal) {
       // DOM not updated yet

       this.$nextTick(function () {
           // DOM updated

           this.first_load = true;
           this.scroll_bottom();
       });
    }
}

스크롤 가능한 div의 ID가cont스크롤하려면 다음 방법을 사용합니다.

scroll() {
  document.getElementById('cont').scrollTop = document.getElementById('cont').scrollHeight;
}

그리고 넌 이걸 안에서 불러야 해updated갈고리를 채우다

updated() {
  this.scroll();
}

v-for 앞에 div에서 v-chat-scroll 사용

언급URL : https://stackoverflow.com/questions/51852708/vuejs-how-to-scroll-bottom-when-data-changes