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

Question

I have making a video list viewer using dailymotion api with vue.js. but I faced a wall about "v-for" which I display video list data.

I requested from dailymotion api.

Sample data(jsonURL): https://api.dailymotion.com/user/olddog928/videos?fields=id,thumbnail_url,title&availability=1&page=1&limit=100

in this data, the "title" data located into "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;
            });
        }
    }
});

The point is 1. get json with axios -> 2. save data list to "lists" -> 3. Using v-for to display list title in "li" tag

Answer 1

I guess, this is not pointing to your Vue context inside .then() callback. Maybe, use Arrow function:

Try changing: .then(function (res) { to .then((res) => {