Utilize the axios request api interface to fetch data and populate a list, but encounter a problem when trying to iterate through the properties of an object using v-for.
Take a look at the javascript snippet below:
var vm = new Vue({
el: '#app',
data: {
movies: []
},
created() {
this.getMovie();
},
methods: {
getMovie: function () {
axios.get("https://api.douban.com/v2/movie/top250")
.then((res) => {
console.log(res.data.subjects);
this.movies = res.data.subjects;
})
.catch((error) => {
console.log(error);
});
}
}
})
Here is the HTML snippet:
<div id="app">
<div class="content">
<div class="title">
<ul>
<li v-for="(item,index) in movies">
{{item.title}}
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
I am struggling with loading data into the list, and I believe someone might be able to help. Need assistance with populating the list with data. Can anyone solve this issue? Check out the jsfiddle Online code debugging tools for reference: