如何使用 v-for 显示来自 dailymotion api 的数据？ [复制]答案

【问题标题】：How can I use v-for to display data from dailymotion api? [duplicate]如何使用 v-for 显示来自 dailymotion api 的数据？ [复制]
【发布时间】：2019-06-14 03:08:54
【问题描述】：

我使用 dailymotion api 和 vue.js 制作了一个视频列表查看器。但我遇到了关于“v-for”的墙，我显示了视频列表数据。

我从 dailymotion api 请求。

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

在这个数据中，“title”数据位于“loaded data” -> list(Array) -> “title”中。

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.将数据列表保存到“lists” -> 3.使用v-for在“li”标签中显示列表标题

【问题讨论】：

标签： vue.js axios v-for

【解决方案1】：

我猜，this 没有在 .then() 回调中指向您的 Vue 上下文。也许，使用箭头函数：

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

【讨论】：