Olá, tenho uma duvida bastante especifica e que acredito que requeira um certo know-how de VUE.js;
Eu estou seguindo o curso, porem fiz pequenas alteracoes no HTML/CSS. No meu caso, optei por exibir as imagens como LI's dentro de uma UL. Para isso, no momento de usar o "Transition", eu precisei usar a tag TRANSITION GROUP.
Nessa tag, se eu passo o valor :key como foto.id, vejo que "foto.id" é undefined. Isso provavelmente ocorre pelo tratamento do escopo do "this" dentro de "Created()", porem ainda não descobri o que fazer aqui. Esse seria o ponto 1 do meu problema.
Outra opção que tenho, é usar ":key=foto", isso funciona, porem meu console começa a logar os erros abaixo (Esse seria o ponto 2 do meu problema):
Duplicate keys detected: '[object Object]'. This may cause an update error.Avoid using non-primitive value as key, use string/number value instead.Portanto, gostaria de um auxilio: Como eu uso transition group, sem alterar meu HTML (fotos dentro de UL > LI) e sem ter erros na console ou então evitando a referencia undefined de foto.id ?
Meu HTML + Javascript (Componente Painel.vue):
<template>
<section class="container__frame">
<div class="search">
<input type="search" class="search__bar" v-on:input="filtro = $event.target.value" placeholder="Digite algo para pesquisar">
</div>
<ul class="listOfCards">
<transition-group name="cardFade">
<li class="card" v-for="foto in fotosFiltered" v-bind:key="foto">
<div class="card__label">{{foto.titulo}}</div>
<img :src="foto.url" :alt="foto.titulo">
</li>
</transition-group>
</ul>
</section>
</template>
<script>
export default {
data() {
return {
fotos: [],
filtro: ''
}
},
computed: {
fotosFiltered(){
if(this.filtro){
let expression = new RegExp(this.filtro.trim(), 'i');
return this.fotos.filter(foto => expression.test(foto.titulo));
}else{
return this.fotos;
}
}
},
created(){
this.$http.get('http://localhost:3000/v1/fotos')
.then(response => response.json())
.then(contentOfResponse => this.fotos = contentOfResponse, err => console.log(err));
}
}
</script>Desde já, obrigado.
