2017-09-16 77 views
0

我一个FAQ页面上正与vue.js调用jQuery的动画scrollTop的类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实例,如手表,准备好,安装,更新等,但他们noe似乎工作。

任何想法?

回答

0

我找到了解决办法,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 
    })  
    } 
}