目录

背景

需求

方法

反思

背景

用v-for遍历data中的数据，代码如下：

如图所示 可以正常遍历出来。

<template>
    <div>
        <ul>
          <li v-for="m in messageList" :key="m.id">
          <a href="/message1">{{m.title}}</a>&nbsp;&nbsp;
          </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}]，这样就比较好遍历了。