需要循环的列表,怎么把active遍历进去?
//这里active的1和0决定是否显示样式就是第二个数组里ajax请求得到的
<li class="item" :class="{'active': ??? }" v-for="course in sevenCourses">
<a v-tap="enterCourse(course)">
<img :src=course.image >
<span class="title">{{course.title}}</span>
<span class="state"><i class="icon icon-lock"></i></span>
</a>
</li>
data里的固定数组1:
sevenCourses:[
{
courseId:"1521",
image:"src/component/assets/Images/20160630001.jpg",
title:"课程一"
},
{
courseId:"1522",
image:"src/component/assets/Images/20160630001.jpg",
title:"课程二"
},
]
接口ajax请求数组2:
dataCourses:[
{
courseId:"1521",
active:"1"
},
{
courseId:"1522",
active:“0”
},
]
我觉得你应该把获得的这个acitve属性写到sevenCourses
里去,然后让vue自己检测数据变化来更新class。
不过因为不能检测对象属性的增加,所以你的sevenCourses
应该先添加这个属性。然后根据收到json去修改active属性。大致是这样:
//这里active的1和0决定是否显示样式就是第二个数组里ajax请求得到的
<li class="item" v-for="course in sevenCourses" :class="{'active': course.active }" >
<a v-tap="enterCourse(course)">
<img :src=course.image >
<span class="title">{{course.title}}</span>
<span class="state"><i class="icon icon-lock"></i></span>
</a>
</li>
sevenCourses:[
{
courseId:"1521",
image:"src/component/assets/Images/20160630001.jpg",
title:"课程一",
active: "0"
},
{
courseId:"1522",
image:"src/component/assets/Images/20160630001.jpg",
title:"课程二",
active: "0"
},
]
你的ajax函数里大致是这样(promise差不多就不写了):
// 获得$el实例以便在for代码块内部使用
var el = this
_ajax({
...
success (res) {
for(var dataCourse in res.dataCourses) {
for (var course in el.seveCourses) {
if (course.courseId === dataCourse.courseId) {
course.active = dataCourse.active;
break;
}
}
}
}
});