Question

我已经使用带有vue.js的Dailymotion API制作了视频列表查看器。但是我遇到了一面关于“ v-for”的墙，它显示了视频列表数据。

我从Dailymotion API请求。

样本数据（jsonURL）：https://api.dailymotion.com/user/olddog928/videos?fields=id,thumbnail_url,title&availability=1&page=1&limit=100

在此数据中，“标题”数据位于“已加载数据”->列表（数组）->“标题”中。

HTML:
<div id="app">
    <button v-on:click="getList">Load list</button>
    <ul>
        <li v-for="l in lists">{{ l.title }}</li>
    </ul>
</div>

JavaScript:
var url = 'https://api.dailymotion.com/user/olddog928/videos';
new Vue({
    el: '#app',
    data: {
        lists: null
    },
    methods: {
        getList() {
            axios({
                method: 'get',
                url: url,
                params: {
                    fields: 'id,thumbnail_url,title',
                    availability: 1,
                    page: 1,
                    limit: 100
                }
            }).then(function (res) {
                console.log(res.data.list);
                this.lists = res.data.list;
            });
        }
    }
});

重点是1.用axios获取json-> 2.将数据列表保存到“列表”-> 3.使用v-for在“ li”标签中显示列表标题

Answer 1

我想，this不在.then()回调中指向您的Vue上下文。也许使用箭头功能：

尝试更改：将.then(function (res) {更改为.then((res) => {

如何使用v-for显示Dailymotion API中的数据？

1 个答案: