![](https://i-blog.csdnimg.cn/blog_migrate/21874aa9472c7bf94c9250e1d1e927f2.png)
<div>
<el-carousel>
<el-carousel-item v-for="item in guideBanner" :key="item.id">
<img :src="item.cover" class="banner_img" />
</el-carousel-item>
</el-carousel>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/4fd6ac63e00e4d7bf7af2b395c3af38b.png)
v-for循环遍历的时候item是一个对象,所以报错原因是 :key=“item”绑定成了一个对象,但是绑定的要是独一无二的数值所以在:key=“item.id”绑定了一个后端给的独一无二的字段。报错消失。查看是否拿到数据使用双括号{{ item }}然后去页面中看是否有拿到后端反的数据。
****下面附上async接口的使用
<!-- 轮播图1 -->
<div class="picture">
<el-carousel height="600px">
<el-carousel-item v-for="item in banners" :key="item.id" >
<el-image :src="item.cover" class="banner_img" />
</el-carousel-item>
</el-carousel>
</div>
export default {
data(){
return{
banners:[], //循环遍历的数组
}
}
}
created(){
this.getBanner();
},
methods:{
//首页轮播图
async getBanner(){
let res = await home();
this.banners = res.home_banner;
// this.guideBanner = res.guide_banner 同个接口,同个页面下的banner调用方法相同
},
}