2
respostas

Erro no menu da página

No meu console sempre aparece dois erros quando renderizo a Home . Sempre que faço a troca pelo menu os erros são populados no console... não consigo achar o motivo

vue.esm.js?efeb:591 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

found in

---> <Home> at src\components\home\Home.vue
       <App> at src\App.vue
         <Root>
warn @ vue.esm.js?efeb:591
_createElement @ vue.esm.js?efeb:4388
createElement @ vue.esm.js?efeb:4357
vm._c @ vue.esm.js?efeb:4489
(anonymous) @ Home.vue?3e28:22
renderList @ vue.esm.js?efeb:3705
render @ Home.vue?3e28:21
Vue._render @ vue.esm.js?efeb:4544
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
run @ vue.esm.js?efeb:3219
flushSchedulerQueue @ vue.esm.js?efeb:2981
(anonymous) @ vue.esm.js?efeb:1837
flushCallbacks @ vue.esm.js?efeb:1758
Promise.then (async)
microTimerFunc @ vue.esm.js?efeb:1806
nextTick @ vue.esm.js?efeb:1850
queueWatcher @ vue.esm.js?efeb:3068
update @ vue.esm.js?efeb:3209
notify @ vue.esm.js?efeb:697
reactiveSetter @ vue.esm.js?efeb:1014
proxySetter @ vue.esm.js?efeb:3300
(anonymous) @ Home.vue?4de6:48
Promise.then (async)
p.then @ vue-resource.common.js?929a:237
created @ Home.vue?4de6:48
callHook @ vue.esm.js?efeb:2921
Vue._init @ vue.esm.js?efeb:4630
VueComponent @ vue.esm.js?efeb:4798
createComponentInstanceForVnode @ vue.esm.js?efeb:4310
init @ vue.esm.js?efeb:4131
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
patch @ vue.esm.js?efeb:6130
Vue._update @ vue.esm.js?efeb:2670
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
run @ vue.esm.js?efeb:3219
flushSchedulerQueue @ vue.esm.js?efeb:2981
(anonymous) @ vue.esm.js?efeb:1837
flushCallbacks @ vue.esm.js?efeb:1758
5vue.esm.js?efeb:591 [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

found in

---> <Home> at src\components\home\Home.vue
       <App> at src\App.vue
         <Root>
2 respostas

Achei a correção...

quando usamos a tag v-for, é necessário uma key.

o correto seria:

 <li v-for="(foto,index) of fotos" :key="index">

Na verdade essa key é requisitada apenas em versões mais atuais do vue. Esta key serve para o vue saber qual item da lista renderizar sem precisar redesenhar a lista toda quando um item mudar