Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

filtrar

boa tarde, estou fazendo uns teste próprios e não to conseguindo filtrar, queria filtrar sem fazer requisisao

(estão tudo dentro da div normal só não coloquei aqui), quando eu coloco a imagem dentro do do meu painel ela não aparece, e quando eu coloco a img fora ela aparece

//APP

<input type="search" class="filtro" v-on:input="filtro = $event.target.value" placeholder="filtre por parte do título">
       <ul>
      <li class="lista-fotos-item" v-for="foto of fotosComFiltro">

            <meu-painel>
                <img :src="fotos.url">
              </meu-painel>
     </li>
</ul>


components:{
        'meu-painel': Painel
    },

data(){

        return {
            filtro: '',
            fotos: {
                url:'https://img.sm360.ca/ir/w940/images/inventory/dilawri-vancouver-honda/honda/cr-v/2015/6402112/6402112_09057_ONE80_6406280_644778398.jpg'

            }

        }
 }

computed: {
            fotosComFiltro(){
                if(this.filtro){
                    let exp = new RegExp(this.filtro.trim(), 'i');
                    return this.fotos.filter(foto => exp.test(foto.titulo));
                }else {
                    return this.fotos
                }
            }
        }

NO PAINEL SÓ TEM UM H1 ESCRITO HONDA, e eu queria que quando eu digitar Honda aparece a img da honda

1 resposta
solução!

Fala ai Leveditor, tudo bem? O problema está como você está filtrando e montando sua propriedade fotos.

Repare na sua definição:

fotos: {
    url:'https://img.sm360.ca/ir/w940/images/inventory/dilawri-vancouver-honda/honda/cr-v/2015/6402112/6402112_09057_ONE80_6406280_644778398.jpg'
}

Seu fotos é um objeto, logo, ele não vai possuir a função filter (que por padrão é exclusiva do array).

E sua condição onde você usa this.fotos.filter(foto => exp.test(foto.titulo));, a propriedade titulo não existe no seu objeto, você apenas definiu url.

Sugiro trocar o objeto por um array de objetos com duas propriedades: url e titulo:

data(){
    return {
        filtro: '',
        fotos: [
            { url: 'alguma-url', titulo: 'algum-titulo' },
            { url: 'alguma-url', titulo: 'algum-titulo' },
            { url: 'alguma-url', titulo: 'algum-titulo' },
        ]

    }
}

A ideia seria mais ou menos essa.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software