2017-12-19 8 views
0

Ich muss die Scroll eines Div aktualisieren, nachdem es gerendert wurde. In echtem Code ist das div mit dem Ergebnis eines asynchronen Aufrufs gefüllt, mit vielen Zeilen und Spalten, aber ich habe diesen Codepen erstellt, um das Problem zu sehen.Vue js updaten scrollTop

<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

Wie man sehen kann, ist die scrollTop nur auf die Schaltfläche Click-Ereignis aktualisiert.

Wie kann die Eigenschaft scrollTop automatisch aktualisiert werden, nachdem das div gerendert wurde?

+0

Sie kann scrollbehaviour in vue-router verwenden, um dies zu erreichen. Sie benötigen keine zusätzlichen Bibliotheken, wenn Sie SPA-Frameworks verwenden. – divine

Antwort

1

Basierend auf Ihrem Codepen scheint es, dass Sie VueJs 1.0, nicht VueJS 2.0 verwenden. In Version 1 wird der Lifecycle-Hook, der aufgerufen wird, sobald die Komponente geladen ist, als "ready" bezeichnet.

Siehe https://vuejs.org/v2/guide/migration.html#Lifecycle-Hooks für die Differenz zwischen v1 und v2.

Wenn Sie Version 1 verwenden möchten, verwenden Sie die folgenden Schritte aus:

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

Ich habe VueJS 2.0 geändert und jetzt funktioniert es. Vielen Dank – kNo

1

Ich denke, dass Sie einen Tippfehler in Ihrem Code haben, ist es nicht "update", sondern "aktualisiert"

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