Membuat search dengan vue yang di gabungkan dengan load more

saya sedang mengerjakan sebuah web yang mengunakan load more data jadi gk pake pagination nah nampilin datanya sudah dan pencarianya juga sudah tapi pas saya cari si bagian load morenya itu gk berubah tetap mengambil data lama yang lengkap, jadi pertanyaan saya bagaimana agar saat saya mencari data si bagian load morenya itu me load data yang saya cari

<script type="text/javascript">
    var app = new Vue({
      el: '#loadPost',
      data: {
        isFinished: false,
        row: 2,
        rowperpage: 2,
        buttonText: 'Load More',
        posts: '',
        searchs:''
      },
      mounted:function (){
        console.log(this.searchs);
      },
      methods: {
        loginempty: function(){
                  swal({
                    title: "Sorry",
                      text: "Anda harus login dulu sebelum upload karya",
                      icon: "error"
                    });
    },
        search: function(){
              var key = document.getElementById('search').value
              var fd = new FormData()
              fd.set('search',key);
              axios.post('<?=base_url()?>home/loadPost/',fd, {

              }).then(function(res){
                console.log(res);
              })
        },
        getPosts: function(){
          axios.post('<?=base_url()?>home/loadPost/', {

          })
          .then(function (response) {
             if(response.data !=''){

               // Update rowperpage

               console.log(this.searchs);
               if (app.posts.length == 0) {
                  var len = 2
               }else {
                 app.row+=app.rowperpage;
                 var len = length+2;
                 if (app.row > response.data.length-1) {
                   app.buttonText = "No more Creation avaiable.";
                   isFinished = true

                 }
               }

               if(len < postlength){
                 var postlength = 2
                 app.buttonText = "Loading ...";
                 setTimeout(function() {
                    app.buttonText = "Load More";
                    console.log(this.row);
                    // Loop on data and push in posts
                    for (let i = len; i < postlength; i++){
                       app.posts.push(response.data[i]);
                       postlength+=2
                    }
                 },500);
               }else{
                  app.posts = response.data;

                  if (app.isFinished == true) {
                    app.buttonText = "No more Creation avaiable.";
                  }
               }

             }else{
               app.buttonText = "No more Creation avaiable.";
               app.isFinished = true;
             }
           });
         }
       },
       created: function(){
          this.getPosts();
       }
    })
    </script>

avatar devry
@devry

44 Kontribusi 5 Poin

Dipost 5 tahun yang lalu

Tanggapan

kemungkinan kesalahannya ada pada backend, pastikan tanpa ajax pun data dari backend kamu sudah benar saat melakukan request, kita ngga tahu backend kamu seperti apa, jadi tidak bisa banyak bantu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban