cleopatria's avatar

How to use Element ui pagination with Vue JS and Laravel

I'm trying to use element ui pagination with Vue JS and Laravel. It's not changing the data when I clicked next or prev. How to use it properly?

<tbody>
 <tr  v-for="post in posts | limitBy count offset">
     <td>{{post.id}}</td>
     <td>{{post.title}}</td>
     <td>{{post.body | trunCate}}</td>
     <td v-if="timeLang == 'en'">{{post.created_at | formatDateEn}}</td>
     <td v-else-if="timeLang == 'id'">{{post.created_at | formatDateId}}</td>
     <td><router-link :to="'/' + $route.params.trans + '/adminspace/' + post.post_id"><a 
     class="btn btn-default" >View</a></router-link></td>
     </tr>
     <tr v-if="!dataPost">
     <td>No result</td>
 </tr>
 </tbody>
 </table> 
 <div class="text-center">

 <el-pagination
 @current-change="handleCurrentChange"
 :current-page="current_page"
 :page-size="per_page"
 layout="prev, pager, next"
 :total="total">
 </el-pagination>
 </div>
 export default {
    data()
   {
      return {
          posts: [],
          timeLang: this.$route.params.trans,
          search: '',
          dataPost: true,
          per_page: null,
          current_page: null,
          total: null,
          next_page_url: null,
      }
  },
  created(){
    this.fetchPost();
  },
  methods: {
      fetchPost() {
      axios.get('/' + this.$route.params.trans + '/adminGetPosts')
      .then(({data}) => {
          this.posts = data.data
          this.current_page= data.current_page
          this.per_page = data.per_page
          this.total = data.total
          this.next_page_url = data.next_page_url
      })
      },
      searchPost() {
      axios.get('/' + this.$route.params.trans + '/adminSearchPost?search=' + this.search)
      .then(({data}) => {
          this.posts = data
          if(this.posts == '') {
              this.dataPost = false;
          } else {
              this.dataPost = true;
          };
          })
      },
      handleCurrentChange(val) {
          this.currentPage = val;
          console.log(`current page: ${val}`);
      }
      
  }
0 likes
1 reply
ardianck's avatar

The handleCurrentChange(val) method will only update the currentPage value, you'll next to call the function to get the updated data (with currentPage) and make another call to route with different currentPage.

Please or to participate in this conversation.