报错问题Vue warn]: Duplicate keys detected: ‘[object Object]’. This may cause an update error.
vue.runtime.esm.js?c320:4605 [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.found in--->at src/components/layout/appMain.vueat src/components/layout/index.vue控制
·
<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>
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调用方法相同
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)