我正在构建一个应用程序以显示外部json的某些项目，我需要通过搜索输入对其进行过滤。
应用程序正确显示了项目，但是当我创建过滤器功能时，它停止了。
https://codesandbox.io/s/vue-template-x1l1t?fontsize=14
显示的项目arent。 如果我更改了if条件以删除过滤器功能，则会显示这些项目。
不起作用：produtoFiltrado中的v-for =“ produtos”> 工作（但未过滤）：gc.produtos中的v-for =“ produtos”>
答案 0 :(得分：2)
从服务返回的数据是一个对象。该数组位于成员produtos中。此外，Axios还会在response.data中返回数据。
// use this one, as your filter on this.gc.produtos
this.gc = response.data;
此外，您的过滤器引用了一个不存在的项目，直到您接收到数据。 gc.productos.filter将初始值更改为此，这样您的过滤器就不会感到恐惧：
gc: {produtos:[]},
对于您的过滤器，请尝试以下操作：
produtoFiltrado: function() {
return this.gc.produtos.filter(cust => {
if (this.search.trim().length === 0){
return true;
}
return cust.nome.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
});
}
最后，由于CORS，这在演示站点上不起作用；完全没有响应，因为返回了错误。
将其粘贴到您的项目中，它具有对数据进行硬编码的固定数据对象和固定的过滤器。
<template>
<div id="app">
<main class="container produtos-content">
<input type="search" v-model="search" placeholder="Procurar...">
<div class="produto col-md-3" v-for="produtos in produtoFiltrado">
<img width="100%;" v-bind:title="produtos.nome" v-bind:src="produtos.imagem">
<span class="valor">{{ produtos.valor}}</span>
<h2>{{produtos.nome}}</h2>
<h3>{{produtos.decricaoCurta}}</h3>
</div>
</main>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
gc: {
}
return {
gc: {produtos:[]},
search: "",
produtos: [
{
nome: "",
id: "",
promocao: "",
exclusivo: "",
imagem: "",
decricaoCurta: "",
descricaoLonga: "",
fichaTecnica: {
titulo: "",
descricao: ""
}
}
]
};
},
computed: {
produtoFiltrado: function() {
return this.gc.produtos.filter(cust => {
if (this.search.trim().length === 0){
return true;
}
return cust.nome.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
});
}
},
mounted() {
// simulating the database call...
this.loading = false
this.gc = {
"produtos": [
{
"id": 1,
"nome": "Fone Bluetooth XPTO",
"valor": 198.00,
"exclusivo": false,
"promocao": true,
"imagem": "https://i.imgur.com/ZwIhQDO.jpg",
"decricaoCurta": "Aparelho intra auricular de som em alta definição sem fio para os viciados de plantão",
"descricaoLonga": "Os novos fones de ouvido bluetooth XPTO proporcionam o melhor cancelamento de ruído da classe e a capacidade de misturar o som do ambiente para uma maior consciência dos arredores quando o desejar, fazendo dele o fone de ouvido esportivo mais versátil do mercado. Projetado para o esporte com um design reflexivo exclusivo, os fones de ouvido bluetooth XPTO apresentam o lendário som XPTO e um design de ajuste ergonômico que mantém os fones no lugar, independentemente da intensidade da rotina de exercícios. À prova de suor e disponível em azul, preto, vermelho e azul-esverdeado, os fones de ouvido bluetooth XPTO não precisam de bateria, pois extraem energia e áudio digital diretamente do conector lightning em dispositivos Apple.",
"fichaTecnica": [
{
"titulo": "Lightning connector",
"descricao": "Sim"
},
{
"titulo": "Dynamic Drivers (mm)",
"descricao": "14.8"
},
{
"titulo": "Frequency Response",
"descricao": "10 Hz-22 kHz"
},
{
"titulo": "Dimensões do produto",
"descricao": "1,2 x 2,6 x 2,2 cm ; 104 g"
},
{
"titulo": "Tipo de fones",
"descricao": "Intra-auricular"
},
{
"titulo": "Tecnologia de conexão",
"descricao": "Bluetooth"
}
]
},
{
"id": 2,
"nome": "Guarda-Chuva XPTO",
"valor": 19.90,
"exclusivo": true,
"promocao": false,
"imagem": "https://i.imgur.com/jl3mWPw.jpg",
"decricaoCurta": "Abertura e fechamentos automáticos da copa, estrutura em fibra",
"descricaoLonga": "Guarda chuva original XPTO modelo c-108 abre e fecha automático! Compacto, 37cm quando fechado e 122cm quando aberto. Um dos melhores guarda chuvas do brasil, qualidade garantida! Empresa no Brasil ha mais de 10 anos, sinônimo de qualidade e credibilidade. 90 dias de garantia de fábrica. Cabo em polímero de alto brilho. Design americano, simples, fino e elegante. Haste central com 3 estágios em aço cromado. Tecido 100% em poliéster totalmente impermeável, de alta qualidade e secagem ultra rápida. Sistema central e ponteiras em fibra de vidro, mesmo material de varas de pesca profissionais. Ponteiras flexíveis de altíssima resistência. Sistema interno de molas nas varetas em alumínio no sistema anti-vento. Sistema anti-vento (se virar com ventos fortes não quebra) reforçado com ligas em poliuretano, firmes e flexíveis.",
"fichaTecnica": [
{
"titulo": "Cor",
"descricao": "Azul Marinho"
},
{
"titulo": "Comprimento fechado",
"descricao": "37cm"
},
{
"titulo": "Comprimento aberto",
"descricao": "122 cmz"
},
{
"titulo": "Garantia",
"descricao": "90 dias de fábrica"
},
{
"titulo": "Modelo",
"descricao": "c-108"
},
{
"titulo": "Material vareta",
"descricao": "Aço cromado e fibra de vidro"
}
]
},
{
"id": 3,
"nome": "Notebook XPTO",
"valor": 2564.90,
"exclusivo": false,
"promocao": true,
"imagem": "https://i.imgur.com/550ZKEa.jpg",
"decricaoCurta": "Onde a brincadeira termina e o jogo começa",
"descricaoLonga": "A nova série de PCs Gaming XPTO foi projetada para atender as necessidades dos Gamers, com gráficos poderoso, desempenho extremamente rápido e sistema térmico especial, eles farão todas suas experiências se tornarem mais intensas e reais; com o novo notebook XPTO Gaming você terá uma incrível experiência em um notebook com um design elegante e desempenho excepcional; este notebook conta com a 8ª geração de processadores Intel core até Core i7, que fornecem um desempenho poderoso, seja para você jogar todos seus games, streamming de vídeos ou trabalhar em projetos que exigem maior capacidade gráfica; possui placa de vídeo dedicada NVIDIA GeForce GTX de 4GB, que permitem você jogar em configurações intensas com detalhes absolutamente claros; a tela Full HD com painel IPS e antirreflexo proporciona imagens maravilhosas e detalhes surpreendentes, fornecendo visuais fantásticos para jogar seus games preferidos; armazenamento de até 1TB + 256GB SSD permite você armazenar seus conteúdos sem se preocupar com falta de espaço.",
"fichaTecnica": [
{
"titulo": "Cor",
"descricao": "Preto"
},
{
"titulo": "Tipo de processador",
"descricao": "Intel Core i7"
},
{
"titulo": "Memória Ram",
"descricao": "16gb"
},
{
"titulo": "SSD",
"descricao": "256gb"
},
{
"titulo": "Modelo de placa de vídeo",
"descricao": "NVIDIA GeForce GTX 1050 Ti com 4GB GDDR5"
},
{
"titulo": "Resolução máxima da tela",
"descricao": "1920 x 1080"
}
]
},
{
"id": 4,
"nome": "Smartphone XPTO",
"valor": 1666.00,
"exclusivo": false,
"promocao": true,
"imagem": "https://i.imgur.com/mtsY67r.jpg",
"decricaoCurta": "Um deleite cromático. Inspirando-se na magia do céu, o Smartphone XPTO reflete as fascinantes cores da luz",
"descricaoLonga": "Testemunhe a beleza da misteriosa Aurora e da escuridão da noite. Atreva-se a impressionar. O Leica Quad Camera System acomoda sua fotografia para ajudar a ver o mundo em sua totalidade. Este super sistema de câmera incomparável inclui uma Lente SuperZoom, uma Câmera Super Sensora de 40 MP e uma Lente Ultra Grande Angular de 20 MP, dando a você a liberdade de capturar seus momentos incríveis. A nova lente teleobjetiva periscópio permite que mais recursos de zoom óptico sejam colocados em um corpo compacto sem perder a qualidade da imagem. Juntamente com a saturação de cor fornecida pela câmera principal de 40 MP e a estabilidade do OIS, a Lente SuperZoom oferece 10x zoom híbrido para ver o nunca antes visto com grande resolução e riqueza de detalhes. Além disso, pode trazer a lua à sua frente com zoom de até 50x.",
"fichaTecnica": [
{
"titulo": "Cor",
"descricao": "Preto"
},
{
"titulo": "Memória ROM",
"descricao": "256gb"
},
{
"titulo": "Memória Ram",
"descricao": "8gb"
},
{
"titulo": "Tecnologia de conexão",
"descricao": "4G"
},
{
"titulo": "Peso do envio",
"descricao": "599 g"
},
{
"titulo": "Dimensões da embalagem",
"descricao": "18 x 10 x 6 cm"
}
]
},
{
"id": 5,
"nome": "Caneta XPTO",
"valor": 12398.00,
"exclusivo": false,
"promocao": true,
"imagem": "https://i.imgur.com/APDyP1f.jpg",
"decricaoCurta": "Instrumento de escrita XPTO Meisterstück Hommage à W.A. Mozart, com sistema de escrita esferográfica Mozart.",
"descricaoLonga": "Os instrumentos de escrita XPTO endossam a busca da marca suíça pela técnica artesanal e pela perfeição. Durante 100 anos elas permaneceram fieis ao seu caráter inconfundivelmente atemporal e sofisticado. Suas firmes exigências quanto a formato, estilo, materiais e execução estão refletidas em todos os seus produtos. Para criar a perfeita maestria artesanal, seus artesãos unem o design nobre às proporções harmoniosas, colocando paixão e alma em cada peça desenvolvida, criando peças que são verdadeiras obras de dedicação e arte.",
"fichaTecnica": [
{
"titulo": "Material",
"descricao": "Resina"
},
{
"titulo": "Cor",
"descricao": "Prateado, Preto"
},
{
"titulo": "Cor da tinta",
"descricao": "Azul"
},
{
"titulo": "Tipo",
"descricao": "Rollerball"
},
{
"titulo": "Segmento",
"descricao": "Masculino"
},
{
"titulo": "Peso da embalagem",
"descricao": "298g"
}
]
},
{
"id": 6,
"nome": "Monitor Gamer XPTO",
"valor": 2566.60,
"exclusivo": false,
"promocao": true,
"imagem": "https://i.imgur.com/Er8mKvB.jpg",
"decricaoCurta": "Monitor Gamer XPTO possui alta qualidade e muitos recursos especiais para os jogadore",
"descricaoLonga": "A tecnologia AMD FreeSync, que foi incorporada ao monitor, sincroniza a taxa de atualização do seu monitor com o FPS da sua GPU AMD para evitar o rasgo da tela. Com visuais sem rasgos, você pode finalmente desfrutar das artes de jogo perfeitas que os gigantes da indústria projetam para você. O amplo ângulo de visão permite que você compartilhe suas emocionantes experiências de jogo com os amigos ao seu redor, criando memórias divertidas e vívidas.",
"fichaTecnica": [
{
"titulo": "Tamanho painel",
"descricao": "23,6\" (60 cm)"
},
{
"titulo": "Resolução painel",
"descricao": "1920 x 1080"
},
{
"titulo": "Taxa de atualização",
"descricao": "75Hz"
},
{
"titulo": "Tempo de resposta",
"descricao": "1ms"
},
{
"titulo": "Brilho",
"descricao": "250 cd/m2"
},
{
"titulo": "Proporção da tela",
"descricao": "16:9"
}
]
},
{
"id": 7,
"nome": "Patinete Elétrico XPTO",
"valor": 5698.00,
"exclusivo": true,
"promocao": false,
"imagem": "https://i.imgur.com/GhVWPQj.jpg",
"decricaoCurta": "É uma verdadeira ferramenta para a revolução do transporte pessoal!",
"descricaoLonga": "Existem diversas maneiras de andar pela cidade. Os nossos preferidos são os práticos, baratos, ecológicos e divertidos. Pensando nisso oferecemos a tecnologia para atender a pessoas das mais variadas idades. O Patinete é ideal para mobilidade nos grandes centros urbanos. Sua bateria de Lítio é leve e tem um carregamento rápido que proporciona ao veículo uma autonomia de até 30 km. O Patinete atinge velocidade de 25Km/h para que você chegue rápido em seus compromissos. Seu chassi construído em alumínio é leve e resistente, e a haste do guidão é dobrável para possibilitar um melhor transporte. O Patinete vem equipado com campainha, farol, lanterna e luz de alerta de freio em led para que passeios noturnos fiquem mais seguros.",
"fichaTecnica": [
{
"titulo": "Velocidade máxima",
"descricao": "25 km/h"
},
{
"titulo": "Carga máxima",
"descricao": "120kg"
},
{
"titulo": "Bateria",
"descricao": "Li-ion de 18650 mAh"
},
{
"titulo": "Altura",
"descricao": "48 cm"
},
{
"titulo": "Largura",
"descricao": "42 cm"
},
{
"titulo": "Comprimento",
"descricao": "106 cm"
}
]
},
{
"id": 8,
"nome": "Ratoeira Eletrônica XPTO",
"valor": 65.70,
"exclusivo": false,
"promocao": true,
"imagem": "https://i.imgur.com/JqtRzV2.jpg",
"decricaoCurta": "Sistema exclusivo de rearme que possibilita a captura de mais de um rato cada vez que é armada.",
"descricaoLonga": "A Ratoeira XPTO é equipada com uma grande área de captura e pode abater camundongos, ratos de tamanho médio e ratazanas. A armadilha é muito fácil de usar e oferece uma maneira rápida, humanitária e segura de eliminação. Quando o animal entra no aparelho, três placas de aço inox descarregam um forte choque mortal, garantindo altas taxas de eficiência. Um dos destaques das armadilhas Ratzapper® é o recurso de descarte sem sujeira. Quando você tem uma captura, simplesmente incline a Ratoeira XPTO e deixe o roedor morto deslizar para fora.",
"fichaTecnica": [
{
"titulo": "Peso",
"descricao": "900g"
},
{
"titulo": "Dimensões do aparelho",
"descricao": "23 x 9,5 x 11cm"
},
{
"titulo": "Garantia",
"descricao": "2 anos de fábrica"
},
{
"titulo": "Fonte de Alimentação",
"descricao": "Bivolt"
},
{
"titulo": "Modelo",
"descricao": "Classic +"
},
{
"titulo": "País de origem",
"descricao": "Brasil"
}
]
}
]
}
}
};
</script>
<style>
body {
margin: 0;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
main {
text-align: center;
margin-top: 40px;
}
header {
margin: 0;
height: 56px;
padding: 0 16px 0 24px;
background-color: #35495e;
color: #ffffff;
}
header span {
display: block;
position: relative;
font-size: 20px;
line-height: 1;
letter-spacing: 0.02em;
font-weight: 400;
box-sizing: border-box;
padding-top: 16px;
}
button {
background: #51b767;
color: #ffffff;
padding: 15px;
border-radius: 0;
font-weight: bold;
font-size: 15px;
border: 0;
}
.cards {
background: #f5f5f5;
height: 400px;
}
.cards:hover {
transform: translateY(-0.5em);
background: #ebebeb;
}
.cards {
column-count: 1;
column-gap: 1em;
margin-top: 70px;
}
</style>