vue v-for 循环一个数组，key值报错，但是数据是正常显示的

Question

一个轮播组件循环一组图片数组，这个数据可以正常的显示在轮播图里，但是却有一个看不明白的报错

            <swiper :options="swiperOption" class="swiper-box">
                <swiper-slide class="swiper-item" v-for="item in srcList" key="item">
                    <img :src="item.src" alt="...">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

在编辑器里也有波浪线：

这图片的数组是我import导入的

    import bannerBiometric from '@/assets/images/banner-biometric2.png'
    import bannersurveillance from '@/assets/images/banner-surveillance2.jpg'
    
        data(){
            return {
                swiperOption:{
                   pagination: {
                      el: ".swiper-pagination"
                   },
                   autoplay: 5000,
                   loop: true 
                },
                srcList:[
                    {src:bannersurveillance},
                    {src:bannerBiometric}
                ]
            }
        }

这是报的这个错误，看不懂是什么意思

Answer 1

v-for使用key，需要在key前加上:key;
srcList是个数组，key值绑定不能是数据类型Object的item，应该绑定item对象下一个属性，这个属性不能重复出现，否则依旧会出现key值报错；你这里可以改成v-for="(item,index) in srcList" :key="index",index对象数组里的索引，不会重复出现，也就不会报错

Answer 2

你这个key不能这样写吧，要加：啊

<swiper :options="swiperOption" class="swiper-box">
    <swiper-slide class="swiper-item" v-for="item in srcList" :key="item">
        <img :src="item.src" alt="...">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
</swiper>

Answer 3

波浪线应该是 :key = "item" 吧, 你试试。

Answer 4

你给key传的是对象{},不是字符串。如果item没有唯一标识字段的话，那key就去掉，不用传值应该也没问题。

Answer 5

写错了，需要在key前面加:key

Answer 6

两个问题，首先最主要的市key前添加：key,其次key绑定的是索引和id类的单字段，对象也很容易出问题，建议使用v-for的时候格式规范化v-for="(item,index) in Array" :key="index"