目录
背景
用v-for遍历data中的数据,代码如下:
如图所示 可以正常遍历出来。
<template> <div> <ul> <li v-for="m in messageList" :key="m.id"> <a href="/message1">{{m.title}}</a> </li> </ul> </div> </template> <script> import axios from 'axios' export default { name:'Message', data() { return { messageList:[ {id:'001',title:"消息001"}, {id:'002',title:"消息002"}, {id:'003',title:"消息003"}, ] } }, } </script>
需求
现在想使用axios来遍历数据。
方法
1.引入axios import axios from 'axios'
2.准备好后台数据,http://112.125.90.247:81/api/Data/GetAll
返回格式是一个对象数组 [{xxx},{xxx}...{xxx}]
3.在Vue初始化以后,来配置axios。获取地址中的数据。
<template> <div> <ul> //遍历数组 <li v-for = "d in dataList" :key="d.Id">{{d.Name}}</li> </ul> </div> </template> <script> import axios from 'axios'//引入axios export default { name:'Message', data(){ return { dataList:[],//初始化dataList并清空 }; }, created() { const that = this; axios.get('http://112.125.90.247:81/api/Data/GetAll') .then(function (value) { that.dataList = value.data.response; console.log(that.dataList); }) .catch(function (reason) { console.log(reason); }); }, } </script>
反思
在这个demo里,我觉得对于自己比较难的地方是,想要将接收到的数据展示在页面中。不知道要用什么数据类型来定义dataList,解决问题到最后,我发现是因为我没有先准备好后台API地址,一开始我用的数据(https://api.d5.nz/api/yiyan.php)返回类型是text,返回的数据每次只有一条,也不能遍历啊。后面就找了一个比较好的api,返回的数据类型是一个对象数组 [{xxx},{xxx}...{xxx}],这样就比较好遍历了。