logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年

在 Vue 组件内部请求服务接口获取组件需要的数据

  • post index x组件内使用了post list组件,并在其中再次嵌套了post list
  • 数据通过属性传递给组件。
  • post list组件需要用到API HTTP客户端(apiHttpClient)从app service获取数据。
  • 该组件有一个创建生命周期(create it),创建后执行credit函数。
  • credit函数中,使用apiHttpClient的GET请求获取数据,然后将结果存储在组件的post数据中。
  • post list item组件使用v-for循环显示post列表数据。
  • 每个列表项 (post) 绑定到post list item组件的item属性和key属性(值为post.id)。
  • post list item组件声明支持item属性,类型为object
  • 组件模板绑定输出item属性中的titleitem.username
  • 如果获取数据有误,浏览器的控制台会显示cannot read property 'get' of undefined
  • 错误是由于apiHttpClient的导入语法写错,应该使用大括号正确导入。
  • 修正后,浏览器显示从服务器获取到的内容列表数据。