Vue报错：Avoid using non-primitive

简述

Avoid using non-primitive value as key, use string/number value instead.
意思是：避免使用非基本值作为键，而是使用字符串/数字值

示例

d渲染出来的数据是一个对象

 <div v-for="d in newsList" :key="d">
       <!-- {{d}} -->
        <el-row class="newsList_row">
          <el-col :span="4">
            <el-image style="width: 150px; height: 150px" :src="url" ></el-image>
          </el-col>
          <el-col :span="20">
            <div class="newsList_row_title">{{d.title}}</div>
            <div class="newsList_row_content">{{d.content}}</div>
          </el-col>
        </el-row>
      </div>

报错的意思是 不要用对象或是数组作为key，用string或value作为key

修改后如下

d对象中有一个唯一值：d.id

 <div v-for="d in newsList" :key="d.id">
       <!-- {{d}} -->
        <el-row class="newsList_row">
          <el-col :span="4">
            <el-image style="width: 150px; height: 150px" :src="url" ></el-image>
          </el-col>
          <el-col :span="20">
            <div class="newsList_row_title">{{d.title}}</div>
            <div class="newsList_row_content">{{d.content}}</div>
          </el-col>
        </el-row>
      </div>

根据循环读取数据的类型进行修改key中的值，也可以如下：

 <div v-for="(d,index) in newsList" :key="d.index">
       <!-- {{d}} -->
        <el-row class="newsList_row">
          <el-col :span="4">
            <el-image style="width: 150px; height: 150px" :src="url" ></el-image>
          </el-col>
          <el-col :span="20">
            <div class="newsList_row_title">{{d.title}}</div>
            <div class="newsList_row_content">{{d.content}}</div>
          </el-col>
        </el-row>
      </div>