DEV Community

Davi
Davi

Posted on

My infinity scrolls doesn't work (vue.js)

import { defineComponent } from 'vue';
import Card from './Card.vue';
import BarraPesquisa from './BarraPesquisa.vue';

export default defineComponent({
name: 'MostrarPokemons',
components: {
Card,
BarraPesquisa
},
data() {
return {
listaPokemon: [],
detalhesPokemon: [],
pokemonsFiltrados: [],
numeroPokemonsVisiveis: 21,
pokemonsVisiveis: [],
loadingMorePokemons: false
};
},
methods: {
async carregarListaPokemon() {
await this.$store.dispatch('carregarListaPokemon');
this.listaPokemon = this.$store.state.listaPokemon;
await this.pegarDetalhesPokemon();
await this.carregarMaisPokemons();
},
async pegarDetalhesPokemon() {
const detalhesPromises = this.listaPokemon
.slice(0, this.numeroPokemonsVisiveis)
.map(pokemon => this.carregarDetalhesPokemon(pokemon.name));
const detalhes = await Promise.all(detalhesPromises);
this.detalhesPokemon = detalhes;
this.filtrarDetalhesPokemon('');
},
async carregarDetalhesPokemon(nomePokemon) {
const detalhes = await this.$store.dispatch('carregarDetalhesPokemon', nomePokemon);
return detalhes;
},
filtrarDetalhesPokemon(pesquisa) {
this.pokemonsFiltrados = this.detalhesPokemon.filter(pokemon =>
pokemon.name.toLowerCase().includes(pesquisa)
);
this.carregarMaisPokemons();
},
async carregarMaisPokemons(numeroPokemonsVisiveis) {
this.pokemonsVisiveis = this.pokemonsFiltrados.slice(0, numeroPokemonsVisiveis);
},
},
mounted() {
window.onscroll = () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
if (bottomOfWindow) {
this.numeroPokemonsVisiveis += 21;
this.carregarMaisPokemons(this.numeroPokemonsVisiveis)
}
}
},
async created() {
await this.carregarListaPokemon();
},
});

when you reach the final of the page the variable numeroPokemonsVisiveis adds 21 and its happening getting by the console.log, and pass to a function that slices all the pokemons by the numeroPokemonsVisiveis, but the console.log(this.pokemonsFiltrados) always has an array(21), but if I reload the page already in the final of the page the pokemonsFiltrados the next 21 pokemons

this is the vercel website with the console logs : https://pokedex-peach-one-85.vercel.app/

and the repository: https://github.com/DaviRSS1/pokedex ,

Someone save me pls

Top comments (0)