Good morning, such a problem with the view: there is an array of movies, there is a pointer to current. For example, the pointer is 0 and I call the currentPart () method and write down the part of the array from 0 to 59 index and then change the pointer, but when I call again the pointer is 0 again, it should be 60. The code itself:
<template> <main class='list-movies'> <header class='header'> {{ textHead }} </header> <ul class='movies'> <Movie v-for='movie in movies' :key='movie.name' :movie='movie' /> </ul> </main> </template> <script> import Movie from './Movie' import moviesList from '../../sources/movies.js' export default { name: 'ListMovie', components: { Movie }, data: function () { return { textHead: 'Каталог фильмов по всем жанрам', current: 0, total: 60, movies: [] } }, created: function () { localStorage.clear() JSON.parse(localStorage.getItem('movies')) === null ? this.currentPart(this.current, this.current+60) : this.movies = JSON.parse(localStorage.getItem('movies')) localStorage.getItem('current') === null ? this.current += 60 : this.current = parseInt(localStorage.getItem('current')) localStorage.getItem('total') === null ? this.total = 60 : this.total = parseInt(localStorage.getItem('total')) window.addEventListener('wheel', this.handleScroll) }, beforeDestroy: function() { localStorage.setItem('current', this.current) localStorage.setItem('total', this.total) localStorage.setItem('movies', JSON.stringify(this.movies)) }, destroyed: function () { alert('fdgsdfdfg') window.removeEventListener('wheel', this.handleScroll) }, methods: { currentPart: function (current, point) { console.log(current, this.current) for (current; current < point; ++current) { this.movies.push(moviesList[current]) } }, nextPart: function () { if (this.total < 180) this.currentPart(this.current, this.current+60) else if (this.total > 180) { this.movies = [] this.currentPart(this.current-120, this.current+60) } }, previosPart: function () { if (this.total > 180) { this.movies = [] this.currentPart(this.current-180, this.current) } }, handleScroll: function (e) { if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { this.nextPart() this.current < moviesList.length-60 ? this.current += 60 : null this.total <= 180 ? this.total += 60 : null } else if (this.current !== 120 && document.documentElement.scrollTop === 0) { this.previosPart() this.current !== 0 ? this.current -= 60 : null } } } } </script> <style scoped> .header { font-size: 1.5em; } .list-movies { padding: 0.8em; } .movies { display: flex; justify-content: center; flex-wrap: wrap; } </style> And it all broke when integrated localStorage
