vue前端遍历后端传过来数据步骤

2024-08-21 约 409 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=115794373

vue前端遍历后端传过来数据步骤

首先需要在api中配置与后端一样的接口如我遍历的列表接口如下

//赛事列表接口
export const getVideoList = (token)=> axios.get("/api/v1/pri/item/result",{
    params:{//因为后端需要传过去一个token才可以不被拦截所以加上了，看各自情况，可以不加
        "token":token
    }
})

params是我设置的请求头，token是放入请求头的数据，如果后端不需要可以不加

2.在我们的页面中先引用接口并且在data中定义videoList来接受返回的数组（videoList可以自己起名）

import {  getVideoList } from "@/api/getData.js";
 data(){
        return{
            videoList: [],
        }
    },

3.在方法中获取请求

  methods:{
        async getVList(){
         
        try{
        	 //如果不设置token，括号里什么也没有
            const result = await getVideoList(this.$store.state.token);
            if (result.data.code == 0) {
                this.videoList = result.data.data;
                //打印可以看一下后端返回的数据
                console.log( result.data.data);
            }
        }catch(error){
            console.log(error)
        }
    }
    },
    mounted(){
     //获取数据后渲染页面
      this.getVList()
    }

4.最后在template中写页面

<template>
	<div>
	 	 //获取到的videoList赋值给item，并且遍历
		 <div v-for="item in videoList" :key="item.id">
		 //这个country是后端返回的数据一个名字，上面打印出来的内容自己找需要遍历的即可
		 <div>{{item.country}}</div>
        </div>  
	</div>
</template>

目录

vue前端遍历后端传过来数据步骤

vue前端遍历后端传过来数据步骤