How can I use v-for to display data from dailymotion api? : <p>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.</p>

<p>I requested from dailymotion api.</p>

<p>Sample data(jsonURL): <a href="https://api.dailymotion.com/user/olddog928/videos?fields=id,thumbnail_url,title&amp;availability=1&amp;page=1&amp;limit=100" rel="nofollow noreferrer">https://api.dailymotion.com/user/olddog928/videos?fields=id,thumbnail_url,title&amp;availability=1&amp;page=1&amp;limit=100</a></p>

<p>in this data, the "title" data located into "loaded data" -> list(Array) -> "title".</p>

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

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;
            });
        }
    }
});
</code></pre>

<p>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</p>
