#vue.js #pagination #axios
#vue.js #разбивка на страницы #axios
Вопрос:
Как сделать разбивку на страницы. Я уже много раз пытался, но у меня не получается. Я должен разбивать страницы без Laravel. Проблема в том, что я не могу создать цикл, который будет отображать количество страниц, на каждой странице должно быть 10 сообщений, а всего 98 сообщений. Я сделал свойство подлежащим вычислению, благодаря которому вы можете узнать, сколько там будет страниц. Я сделал переключение страниц, которое работает. Но по какой-то причине цикл, с помощью которого я буду отображать количество страниц, у меня не работает, я не могу понять, в чем проблема?
Мой Vue js: импортировать axios из ‘axios’;
export default {
name: 'app',
data () {
return{
counter: 1,
zero: 0,
posts: [],
createTitle: '',
createBody: '',
visiblePostID: '',
}
},
watch: {
counter: function(newValue, oldValue) {
this.getData()
}
},
created(){
this.getData()
},
computed: {
evenPosts: function(posts){
return Math.ceil(this.posts.length/10);
}
},
methods: {
getData() {
axios.get(`http://jsonplaceholder.typicode.com/posts?_start=${this.counter} ${this.zero}amp;_limit=10`).then(response => {
this.posts = response.data
})
},
// even: function(posts) {
// return Math.ceil(this.posts.length/10)
// },
deleteData(index, id) {
axios.delete('http://jsonplaceholder.typicode.com/posts/' id)
.then(response => {
console.log('delete')
this.posts.splice(index, 1);
})
.catch(function(error) {
console.log(error)
})
},
addPost() {
axios.post('http://jsonplaceholder.typicode.com/posts/', {
title: this.createTitle,
body: this.createBody
}).then((response) => {
this.posts.unshift(response.data)
})
},
changePost(id, title, body) {
axios.put('http://jsonplaceholder.typicode.com/posts/' id, {
title: title,
body: body
})
},
},
}
Мой html:
<div id="app">
<div class="smallfon">
<div class="blocktwitter"><img src="src/assets/twitter.png" class="twitter"/></div>
<div class="addTextPost">Add a post</div>
<input type="text" v-model="createTitle" class="created"/>
<input type="text" v-model="createBody" class="created"/>
<div><button @click="addPost()" class="addPost">AddPost</button></div>
<div class="post1">
<div class="yourPosts">Your Posts</div>
<ul>
<li v-for="(post, index) of posts" class="post">
<p><span class="boldText">Title:</span> {{ post.title }}</p>
<p><span class="boldText">Content:</span> {{ post.body }}</p>
<button @click="deleteData(index, post.id)" class="buttonDelete">Delete</button>
<button @click="visiblePostID = post.id" class="buttonChange">Change</button>
<div v-if="visiblePostID === post.id" class="modalWindow">
<div><input v-model="post.title" class="changePost"><input v-model="post.body" class="changePost"></div>
<button type="button" @click="changePost(post.id, post.title, post.body)" class="apply">To apply</button>
</div>
</li>
</ul>
<button type="button" @click="counter -=1" class="prev">Предыдущая</button>
<!-- <div class="counter">{{ counter }}</div> --> <span v-for="n in evenPosts" :key="n.id">{{ n }} </span>
<button type="button" @click="counter =1" class="next">Следущая</button>
<!-- <span v-for="n in evenPosts" :key="n.id">{{ n }} </span> -->
</div>
</div>
</div>
Комментарии:
1. Вы не можете вернуть количество страниц, если вы получаете 10 элементов по запросу (
axios.get(...amp;_limit=10)
). ВычисленноеevenPosts
всегда будет возвращать 1, т.е.Math.ceil(10/10) == 1
2. Пожалуйста, скажите мне, как это исправить.
Ответ №1:
Если вы привяжете ограничение к вашему запросу на выборку ( axios.get(...amp;_limit=10)
), вы не сможете вернуть количество страниц, потому что ваше вычисляемое evenPost
свойство всегда будет возвращать 1, т.е Math.ceil(10/10) == 1
Чтобы исправить разбивку на страницы, удалите запрос параметров для получения данных:
getData() {
axios.get('https://jsonplaceholder.typicode.com/posts').then(response => {
this.posts = response.data
})
}
Затем измените counter
страницу по умолчанию на 0
и добавьте вычисляемое свойство, чтобы возвращать 10 записей на ее основе:
data () {
return {
counter: 0,
//...
}
},
computed: {
paginatedPosts() {
const start = this.counter * 10;
const end = start 10;
return this.posts.slice(start, end);
}
}
Теперь вы можете выполнить итерацию по этому свойству:
<ul>
<li v-for="(post, index) of paginatedPosts" class="post">
...
</li>
</ul>