Добрый вечер . делаю пагинацию для галереи.
Пагинация работала, но обновив страницу все сломалось.
консоль выдает :
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "posts"
вот пример кода :
<template>
<div id="app">
<header>
<h1>Vue.js SPA</h1>
</header>
<div class="content">
<div
class="All_img_on_page"
v-for="picture in paginatedData">
<img
:src="picture.picture"
class="pic_on_page">
<button
:disabled="pageNumber === 0"
@click="prevPage">
Previous
</button>
<button
:disabled="pageNumber >= pageCount -1"
@click="nextPage">
Next
</button>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
posts: null,
need_data: 'http://localhost:8080/src/list.json',
pageNumber: 0
}
},
props:{
posts:{
type:Array,
required:false
},
size:{
type:Number,
required:false,
default: 10
}
}, //props
methods: {
getAllPosts() {
axios.get(this.need_data)
.then(response => {
this.posts = response.data;
console.log('json', response.data);
}) //1then
.catch(error => {
console.log('ошибка загрузки json');
console.log(error);
})
},
nextPage(){
this.pageNumber++;
},
prevPage(){
this.pageNumber--;
}
},
created() {
this.getAllPosts();
},
computed: {
pageCount(){
let l = this.posts.length,
s = this.size;
return Math.ceil(l/s);
},
paginatedData(){
const start = this.pageNumber * this.size,
end = start + this.size;
console.log('start', start);
console.log('end', end);
return this.posts.slice(start, end);
}
},
} //default
</script>
