初学vue 求解v-for 含有静态数据怎么循环？

Question

如题，接口里没有给我课程名称，怎么把课程名称循环进列表？

以下是ajax请求到的接口。

sevenCourses:[
    {
        image:"src/component/assets/Images/20160630001.jpg",
        courseId:"1521",
        status:"1",
        active:""
    },
    {
        image:"src/component/assets/Images/20160630001.jpg",
        courseId:"1522",
        status:"1",
        active:""
    },
    {
        image:"src/component/assets/Images/20160630001.jpg",
        courseId:"1523",
        status:"1",
        active:""
    },
    {
        image:"src/component/assets/Images/20160630001.jpg",
        courseId:"1524",
        status:"1",
        active:""
    },
    {
        image:"src/component/assets/Images/20160630001.jpg",
        courseId:"1525",
        status:"1",
        active:""
    },
    {
        image:"src/component/assets/Images/20160630001.jpg",
        courseId:"1526",
        status:"1",
        active:""
    },
    {
        image:"src/component/assets/Images/20160630001.jpg",
        courseId:"1527",
        status:"1",
        active:""
    }
]

<li class="item" :class="{'active':course.active}" v-for="course in sevenCourses">
    <a v-tap="enterCourse(course)">
        <img :src=course.image >
        <span class="title">这是第一节课</span>//这里是课程名
        <span class="state"><i class="icon icon-lock"></i></span>
    </a>
</li>

Answer 1

接到数据后立即遍历数组，给每一项赋上名称

Answer 2

// 这个代表你获取的数组数据，也就是你绑定到DOM的数据数组
sevenCourses:[
    {
        image:"src/component/assets/Images/20160630001.jpg",
        courseId:"1521",
        status:"1",
        active:""
        title:"数学"
    }
]
// 下面就是需要展现数据的地方，也就是课程
<span class="title">{{course.title}}</span>

如果你获取的JSON没有课程数据的话的话，你就弄一个接口再获取一下title，然后遍历插入到原来的那个数组，然后再下面再展现出来，我刚学Vue

Answer 3

假设你v-for="course in sevenCourses"里的sevenCourses已经是数组了，确保这点之后

<li class="item" :class="{'active':course.active}" v-for="course in sevenCourses">
    <a v-tap="enterCourse(course)">
        <img :src=course.image >
        <span class="title">{{course.XX}}</span>//这里是课程名,XX表示是你的课程名，可我看你的数据里面没有课程名字段
        <span class="state"><i class="icon icon-lock"></i></span>
    </a>
</li>

Answer 4

你要先把数据存到vue中的data里面。。。

this.sevenCourses = sevenCourses

然后使用props就可以了。

Answer 5

demo https://github.com/TIGERB/eas...

Answer 6

你这个接口有返回课程id，所以肯定还有一个接口来获取课程列表的。然后根据课程id遍历数据给sevenCourses的对应项添加title呀。