[Solved] Vue error: (Avoid using non-primitive value as key, use stringnumber value instead.)

Avoid using non-primitive values ​​as keywords, and use string/numeric values ​​instead.
Solution:

<el-carousel class="swiper-container" :interval="5000" arrow="hover" @change="carouselItem">
  <el-carousel-item v-for="item in photoList" :key="item">
    <div class="swiper-slide">
      <div class="swiper" v-for="index in item">
       <a @click='goTo(2)' ><img  :src="index" /></a>
      </div>
    </div>
  </el-carousel-item>
</el-carousel>

In the for loop, the bound key value cannot be an object, but a string or value, as shown in the following figure:

<el-carousel class="swiper-container" :interval="5000" arrow="hover" @change="carouselItem">
  <el-carousel-item v-for="item in photoList" :key="item.id">
    <div class="swiper-slide">
      <div class="swiper" v-for="index in item">
       <a @click='goTo(2)' ><img  :src="index" /></a>
      </div>
    </div>
  </el-carousel-item>
</el-carousel>

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *