Vue js do not't update scrollTop

Question

div가 렌더링 된 후 스크롤해야합니다. 실제 코드에서 div는 많은 수의 행과 열이있는 비동기 호출 결과로 채워지지만 문제를보기 위해이 코드를 작성했습니다.

var vm = new Vue({ 
    el: "#app", 
    mounted: function(){ 

    }, 

    data: { 
    xs: 0, 
    ys: 0 
    }, 
    updated: function(){ 
    $('#app').scrollTop(200); 
    }, 
    created: function(){ 
    var vm = this; 
    setTimeout(function(){ 
     vm.xs=30; 
     vm.ys=30 

    },1000); 
    }, 
    methods: { 
    doScroll: function(){ 
    $('#app').scrollTop(200); 
    } 
} 
}) 

 

<div id="app"> 
    <button @click="doScroll()">Scroll</button> 
    <div id="content" v-for="x in xs"> 
    <span v-for="y in ys">{{x}}{{y}} </span> 
    </div> 
</div> 

https://codepen.io/kNo/pen/BJKmbE?editors=1111

에서 볼 수있는 바와 같이

의 scrollTop 만 버튼 클릭 이벤트에 업데이트됩니다.

div를 렌더링 한 후에 scrollTop 속성을 자동으로 업데이트 할 수 있습니까?

Answer 1

귀하의 코드 종이에 따라 VueJS 2.0이 아닌 VueJs 1.0을 사용하고있는 것으로 보입니다. 버전 1에서는 구성 요소가 탑재 된 후 호출되는 라이프 사이클 후크를 "준비"라고합니다.

v1과 v2 사이의 차이에 대해서는 https://vuejs.org/v2/guide/migration.html#Lifecycle-Hooks을 참조하십시오.

버전 1을 사용하려면, 다음을 사용 :

나는 당신이 당신의 코드에 오타가 있다고 생각

ready: function() { 
    $('#app').scrollTop(200); 
} 

Answer 2

, 그것은

var vm = new Vue({ 
    el: "#app", 
    mounted: function(){ 

    }, 

    data: { 
    xs: 0, 
    ys: 0 
    }, 
    updated: function(){ 
    $('#app').scrollTop(200); 
    }, 
    created: function(){ 
    var vm = this; 
    setTimeout(function(){ 
     vm.xs=30; 
     vm.ys=30 

    },1000); 
    }, 
    methods: { 
    doScroll: function(){ 
     $('#app').scrollTop(200); 
    } 
    } 
})