Vue js do not't update scrollTop

Question

レンダリング後にdivのスクロールを更新する必要があります。 実際のコードでは、divは行と列が多い非同期呼び出しの結果で満たされていますが、このコードを作成して問題を確認しました。

<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> 

 

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); 
    } 
} 
}) 

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

見られるように、scrollTopスプライトだけボタンクリックイベントに更新されます。

divをレンダリングした後、scrollTopプロパティを自動的に更新する方法はありますか？

Answer 1

codepenに基づいて、VueJS 1.0ではなくVueJS 2.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); 
    } 
    } 
})