Question

我正在使用vue.js进行常见问题解答页面

这是迄今为止的例子：

<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动画scrollTop函数滚动到展开的项目。

我已经尝试了vue实例，例如手表，准备，装载，更新等等，但是它们似乎正在工作。

有什么想法吗？

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

在vue.js中进行类切换后调用jquery Animate scrollTop

1 个答案: