vue循环组件key报警告

Question

vue循环组件，数据从后台请求回来，就会出现如下报错，若将数据写死，不从后台请求，又不会。

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

found in

---> <ArticleBlock>
       <Home> at src/views/index/Home.vue
         <App> at src/App.vue
           <Root>

这边是我循环组件的代码

    <template v-for="(item, index) in articleList">
        <ArticleBlock :article="item" :key="index"/>
    </template>

ArticleBlock的代码

<template>
  <div class="l-article-block">
    <h3 class="o-article-title"><router-link :to="{name: 'detail', params: {id: article.id}}">{{article.title}}</router-link></h3>
    <div class="l-article-info">
      <ul class="flex">
        <li class="flex-center">
          <i class="iconfont icon-shijian"></i>
          <span class="o-info-desc">{{article.createdAt | formatToYMD}}</span>
        </li>
        <li class="flex-center">
          <i class="iconfont icon-biaoqian"></i>
          <span class="o-label-item" v-for="item in article.labels" :key="item">{{item.name}}</span>
        </li>
      </ul>
    </div>
    <section class="l-article-profile" v-html="article.profile"></section>
    <div class="o-more">
      <router-link :to="{path: '/detail', query: {id: article.id}}">阅读更多 ></router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'article-block',
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  components: {},
  filters: {
    formatToYMD (rawDate) {
      const date = new Date(rawDate)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

Answer 1

:key 尽量使用item里面的不重复的内容 例如item.id

如果不行的话 建议在子组件中用computed重新接收一下

Answer 2

改成下面这样试一下

 <template>
   <div v-for="(item, index) in articleList" :key="index">
     <ArticleBlock :article="item"/>
   </div>
 </template>
 或
 <ArticleBlock :article="item" v-for="(item, index) in articleList" :key="index"/>

key和v-for一般写在同一层