Vue.js调用AJAX接口获取JSON用户列表后页面无显示问题排查

错误原因 #

• 模板遍历对象错误：HTML中v-for指令配置遍历data，但Vue实例的响应式变量中仅定义了usuarios用于存储用户列表，无对应data顶层变量。
• 接口返回数据未绑定到Vue响应式变量：AJAX请求成功后仅打印了响应结果，未将用户列表赋值给usuarios，Vue无法触发视图更新。
• 接口返回结构取值错误：目标接口返回的响应对象中，用户列表实际存储在响应对象的data属性下，不能直接将整个响应对象作为用户数组使用。
• 回调上下文指向问题：AJAX的success普通函数回调中this指向请求上下文，而非Vue实例，直接赋值会出现指向错误。

修正后代码 #

JS代码

var app = new Vue({
  el: "#users",
  data: {
    usuarios: []
  }
});

$.ajax({
  method: "GET",
  url: "https://reqres.in/api/users",
  dataType: "json",
  success: function (res){
    // 提取接口返回的用户列表，赋值给Vue响应式变量
    app.usuarios = res.data;
  }
})

HTML代码

<div class="container text-center mt-4" id="userApp">
  <h1>Lista de usuarios</h1>
  <div id="users">
    <div class="row">
      <!-- 修改遍历对象为usuarios，新增key属性避免Vue列表渲染警告 -->
      <div class="col-md-4" v-for="usuario in usuarios" :key="usuario.id">
        <img 
          :src="usuario.avatar" 
          :alt="usuario.last_name">
        <p>{{ usuario.first_name }} - {{ usuario.last_name }}</p>
      </div>
    </div>
  </div>
</div>

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