-1

Ó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á!

3
  • Dentro de pluckPolos estás a sobreescrever` self.polos = {...self.polos, .`...
    – Sergio
    Commented 18/10/2019 às 14:39
  • @Sergio nessa parte, eu uso o 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 chamar pluckPolos() ele acrescenta uma lista nova.
    – Ursones
    Commented 18/10/2019 às 14:49
  • 1
    Isso não te dá uma array... terias de usar [... e não {...
    – Sergio
    Commented 18/10/2019 às 17:05

1 Resposta 1

0

Graças a um colega do meu Job, consegui entender o que estava acontecendo...

O vm.polos não estava retornando um array e sim um outro objeto cujo as propriedades eram índices.

Só transformei o vm.polos em array e tudo fluiu...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .