Как сделать разбивку на страницы?

#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>
  

Простой живой пример