Vue js doen't update scrollTop

Question

I need update the scroll of a div after it's rendered. In real code the div is filled with the result of an async call, with a lot of rows and columns, but I've built this codepen to see the problem.

<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

As can be seen, the scrollTop is only updated on button click event.

How can the scrollTop property be updated automaticaly after render the div?

Answer 1

Based on your codepen, it appears that you are using VueJs 1.0, not VueJS 2.0. In version 1, the lifecycle hook that gets called once the component is mounted is called "ready".

See https://v2.vuejs.org/v2/guide/migration.html#Lifecycle-Hooks for differnce between v1 and v2.

If you wish to use version 1, use the following:

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