Ótimo dia a todos!
Eu estou apanhando para um filtro onde não entendo o pq está retornando o seguinte erro no console:
"vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: vm.polos.filter is not a function"
Ocorre quando desmarco a checkbox "All"...
A estrutura está em um arquivo "app.vue" e o cód. é o seguinte...
Obs. Não posso deixar o link do webService, mas ele está retornando os valores certinhos, o problema é na hora de filtrar...
import Axios from 'axios'
import _ from 'lodash'
export default {
name: "poloFilters",
data () {
return {
title: "Polos",
url: "link do webService",
current: 0,
polos: [],
estados: '',
selectedPolo: ['All'],
}
},
computed: {
filteredPolos: function(){
var vm = this // vm = Vue Model
var category = vm.selectedPolo
if(category.includes("All")){
return vm.polos
}else{
// Aqui da ruim 😢
return vm.polos.filter((polos) => {
var keys = Object.keys(polos)
var matchFilter = false
category.forEach((key) => {
if(polos[key] === true){
matchFilter = true
}
})
return matchFilter
})
}
}
},
mounted () {
// Chamando os polos colhidos
this.pluckPolos()
},
methods: {
//colhendo os polos
pluckPolos(current = 1){
this.current += current
const self = this
Axios.get(self.url, {params: {current: this.current}})
.then(res => {
self.polos = {...self.polos, ...res.data.polos}
self.filterMap = _.map(res.data.polos, function(poloRes){
return poloRes
})
})
.catch(err => {
alert("Erro de conexão, tente novamente.")
console.log(err)
})
}
}
}
<template>
<div>
<h1>{{ title }}</h1>
<br>
<hr>
<label for="all">
<input type="checkbox" id="all" v-model="selectedPolo" value="All"> All
</label>
<label for="graduacao">
<input type="checkbox" id="graduacao" v-model="selectedPolo" value="graduacao"> Graduação
</label>
<label for="posgraduacao">
<input type="checkbox" id="posgraduacao" v-model="selectedPolo" value="posgraduacao"> Pós
</label>
<label for="graduacao20">
<input type="checkbox" id="graduacao20" v-model="selectedPolo" value="graduacao20"> Segunda Graduação 2.0
</label>
<label for="formpedagogica">
<input type="checkbox" id="formpedagogica" v-model="selectedPolo" value="formpedagogica"> Formação Pedagógica
</label>
<label for="tecnico">
<input type="checkbox" id="tecnico" v-model="selectedPolo" value="tecnico"> Técnico
</label>
<label for="idiomas">
<input type="checkbox" id="idiomas" v-model="selectedPolo" value="idiomas"> Idiomas
</label>
<label for="cursoslivres">
<input type="checkbox" id="cursoslivres" v-model="selectedPolo" value="cursoslivres"> Cursos livres
</label>
<label for="preparatorios">
<input type="checkbox" id="preparatorios" v-model="selectedPolo" value="preparatorios"> Preparatorios
</label>
<ul>
<li>Here we go!</li>
<li v-for="p in filteredPolos" :key="p.id">{{p.nome}}</li>
</ul>
<div class="poloBox">
<div v-for="p in polos" :key='p.id' class="pBox">
<img :src="p.image" :alt="p.nome">
<div class="theData">
<h3>{{p.nome}}</h3>
<small v-if="p.semipresencial" class="semiPresencial">{{p.semipresencial ? 'Aqui tem semipresencial' : null }}</small>
<hr>
<address>
{{p.endereco}}{{p.complemento}} - {{p.bairro}}
<p>{{p.telefone}}</p>
<p>
<strong>{{p.graduacao}} {{p.pos ? ' • ' + p.pos : ''}} {{p.cursosLivres ? ' • ' + p.cursosLivres : ''}} {{p.tecnico ? ' • ' + p.tecnico : ''}}</strong>
</p>
<hr>
<a href="#" class="btn">CONHEÇA AGORA</a>
<hr>
teste... <br>
{{p.classes}}
</address>
</div>
</div>
</div>
</div>
</template>
Alguém consegue me dar uma ajudinha nessa questão?
Obrigado dês de já!
pluckPolos
estás a sobreescrever` self.polos = {...self.polos, .`...self.polos = {...self.polos, ...res.data.polos}
de forma proposital, pois eu acabo carregando mais polos... Então eu faço "self.polos = {... ele mesmo , ... Mais uma lista }"... Complementando, toda vez que eu chamarpluckPolos()
ele acrescenta uma lista nova.[...
e não{...