Filter an array with Vue

Question

Great day to you all!

I’m picking up to a filter where I don’t understand the pq is returning the following error on the console:

"Vue.runtime.esm.js? 2b0e:619 [Vue warn]: Error in render: "Typeerror: vm.polos.filter is not a Function"

Occurs when I uncheck the checkbox "All"...

The structure is in an "app.Vue" file and Cód. is the following...

obs. I can’t leave the webservice link, but it is returning the right values, the problem is when filtering...

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>

Can someone give me a little help on this issue?

Thank you so much!

Answer 1

Thanks to a colleague of my Job, I was able to understand what was happening...

The vm. was not returning a array and yes another object whose properties were indexed.

I just turned the vm. in array and everything flowed...