Vue js不会更新scrollTop

时间:2017-12-19 17:50:26

标签: html scroll vuejs2 render

我需要在渲染后更新div的滚动。 在实际代码中,div填充了异步调用的结果,有很多行和列,但是我已经构建了这个codepen来查看问题。

<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属性?

2 个答案:

答案 0 :(得分:2)

根据您的codepen,您似乎使用的是VueJs 1.0,而不是VueJS 2.0。 在版本1中,安装组件后调用的生命周期钩子称为“就绪”。

请参阅https://vuejs.org/v2/guide/migration.html#Lifecycle-Hooks了解v1和v2之间的差异。

如果您希望使用版本1,请使用以下命令:

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

答案 1 :(得分:1)

我认为你的代码中有拼写错误,它不是“更新”而是“更新”

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