vue前端初学，在一个列表里循环遍历2个数组？

Question

需要循环的列表，怎么把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”
    },
]

Answer 1

我觉得你应该把获得的这个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;
                }
            }
        }
    }
});