Axios返回数据时加载不了vue列表(已解决)
|使用Axios请求豆瓣API接口，然后返回响应数据之后，接着vue遍历列表渲染在页面，其实写的不难的。如果想测试vue简单的例子的话，建议用JSFiddle在线调试工具，可以看看测试是否OK，要是测试完毕OK就可以把代码复制到项目文件里面的。
HTML文件：
+ <div id="app">
+ <ul>
+ <li v-for="item in movies">
+ {{item.title}}
+ </li>
+ </ul>
+ </div>
引入vue和axios文件
<div id="app">
<ul>
<li v-for="item in movies">
{{item.title}}
</li>
</ul>
</div>
+ <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
javascript文件
+ var vm = new Vue({
+ el: '#app',
+ data: {
+ movies: []
+ },
+ created() {
+ this.getMovie();
+ },
+ methods: {
+ getMovie: function () {
+ axios.get("https://api.douban.com/v2/movie/top250")
+ .then(function (res) {
+ console.log(res.data.subjects);
+ this.movies = res.data.subjects;
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+ }
+ }
+ })
但是我发现加载不了列表页面的问题，我不知道继续怎么修改一下呢？
后来在Stack Overflow技术回答网站终于得到了一个答案：
现在把函数改成es6箭头符号()=> {...}。这样，可以分配this.movies时保留此上下文
改成最终效果是：
+ var vm = new Vue({
+ el: '#app',
+ data: {
+ movies: []
+ },
+ created() {
+ this.getMovie();
+ },
+ methods: {
+ getMovie: function () {
+ axios.get("https://api.douban.com/v2/movie/top250")
- .then(function (res) {
+ .then(res => {
+ console.log(res.data.subjects);
+ this.movies = res.data.subjects;
+ })
- .catch(function (error) {
+ .catch(error => {
+ console.log(error);
+ });
+ }
+ }
+ })