在vue.js中的类切换后，请致电JQuery Animate Scrolltop

Question

我正在使用vue.js

在FAQ页面上工作

这是到目前为止的示例：

<li v-for="i in items | searchFor searchString"
 v-on:click="toggleCollapse(i)"
 :class="{ collapsed: i.collapse, expanded: !i.collapse }"
>
 <p><strong>{{i.q}}</strong></p>
 <p>{{i.a}}</p>
</li>

var vm = new Vue({
 el: 'body',
 data: {
  items:[
   {q:"test1", a:"a1", collapse:true},
   {q:"test2", a:"a2", collapse:true},
   {q:"test3", a:"a3", collapse:true},
   {q:"test4", a:"a4", collapse:true},
   {q:"test5", a:"a5", collapse:true},
   {q:"test6", a:"a6", collapse:true}
  ]
 },
 methods: {
  toggleCollapse: function(i) {
   var self = this;
   if(i.collapse){
    self.items.forEach(function(a) {
     a.collapse = true;
    });
    i.collapse = false;     
   }else{
    i.collapse = true;      
   }      
  }
 }
});

当用户单击其中一个项目时，将扩展该项目。其余的将崩溃。

我想调用jQuery动画滚动函数以滚动到用户单击后的扩展项目。

我尝试了Vue实例，例如Watch，Ready，已安装，更新等，但是它们中的Noe似乎有效。

有什么想法？

Answer 1

我找到了解决方案，nexttick willdo：

 methods: {
  toggleCollapse: function(i) {
   var self = this;
   if(i.collapse){
    self.items.forEach(function(a) {
     a.collapse = true;
    });
    i.collapse = false;     
   }else{
    i.collapse = true;      
   }
   this.$nextTick(function(){
     //command here
   })    
  }
 }