VueJS：遍历AJAX返回数据的v-for渲染异常问题

嘿，我仔细看了你的代码，发现两个关键问题导致v-for没法正常渲染数据，咱们一步步来修复：

1. 回调函数里的this指向错误 #

你在$.get的回调里用了普通函数function(data) {...}，这里的this不是Vue组件实例，而是jQuery的jqXHR对象！所以你执行this.posts = data.data;的时候，根本没把数据赋值到组件的posts属性上，这就是为什么控制台有数据，但页面没反应的核心原因之一。

修复方法有两种：

• 用箭头函数（箭头函数会继承外层的this指向，也就是Vue实例）：

mounted: function() {
  $.get("https://api.instagram.com/v1/users/self/media/recent/?access_token=[token]", (data) => {
    console.log(data.data);
    this.posts = data.data;
  });
}

• 提前保存Vue实例的引用：

mounted: function() {
  const vm = this; // 把Vue实例存在变量里
  $.get("https://api.instagram.com/v1/users/self/media/recent/?access_token=[token]", function(data) {
    console.log(data.data);
    vm.posts = data.data; // 用vm来访问组件的posts
  });
}

2. 初始数据类型不匹配 #

你在data里把posts初始化成了空字符串''，但Instagram API返回的是数组类型的数据。Vue的响应式系统对不同类型的数据处理有差异，初始值为字符串的话，后续赋值数组可能会导致响应式更新异常。

把初始值改成空数组[]就好：

data: function() {
  return {
    posts: [] // 这里改成空数组
  }
}

额外检查（可选） #

确认post.images.thumbnail.url的路径是否正确，虽然控制台已经打印出了正确数据，但可以在模板里加个兜底，避免某个post没有thumbnail的情况：

<img v-bind:src="post.images?.thumbnail.url" alt="Instagram post thumbnail">

这里用了可选链操作符?.，如果某个post的images或thumbnail不存在，不会报错，只会显示空的alt文本。

把这两处修改完，你的v-for应该就能正常渲染缩略图啦！

内容的提问来源于stack exchange，提问作者Tim