如何使用 v-for 显示来自 dailymotion api 的数据？

Question

我使用 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在[=29=中显示列表标题] 标签

Answer 1

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

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

如何使用 v-for 显示来自 dailymotion api 的数据？

How can I use v-for to display data from dailymotion api?

vue.js

axios

v-for