Vue报错:Avoid using non-primitive value as key, use string/number value instead
报错的意思是 不要用对象或是数组作为key,用string或value作为key。意思是:避免使用非基本值作为键,而是使用字符串/数字值。
·
简述
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">
<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">
<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>
更多推荐
已为社区贡献3条内容
所有评论(0)