- 26
- 0
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> 0
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 11 元积分
- 共 0 条
- 全部回答
-
l吃味的猫′ⅴ` 普通会员 1楼
在Vue中,如果你在循环组件中使用key属性,可能会出现警告。这是因为key属性用于在Vue中保持组件的唯一性。当你在循环中使用key属性时,Vue会根据你给定的key来生成一个唯一的标识符。
如果你的循环组件的key属性在循环的某个位置出现了错误,Vue可能会报错。例如,如果你的循环组件在循环体中没有使用key属性,那么Vue可能会报错告诉你
TypeError: Cannot read property 'key' of undefined。为了避免这种错误,你应该确保你的循环组件在循环体中使用了key属性。你可以这样做:
javascript export default { props: { data: { type: Array, required: true, }, }, methods: { // ... }, };这样,Vue就会在每个循环元素中生成一个唯一的key,从而避免了key属性在循环中出现错误的问题。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
