Делаем нагрузку больше в Vue

Question

Попытка сделать кнопку «загрузить больше», когда пользователь нажимает ее, добавляет еще 10 элементов на страницу.Но код кнопки не работает гладко ... Я все еще вижу все элементы на странице, а также нет ошибки в консоли тоже .., конечно, кнопка не работает.

Кроме того, пытается сделатьон работает с функцией фильтра .. Спасибо за любой пример, помогите.

data() {
        return {
            estates:[],
            moreEstates: [],
            moreEstFetched: false,
        }
},

mounted() {
        axios.get('/ajax').then((response) => {
            this.estates = response.data
            this.insertMarkers();

        });
},

methods: {
        handleButton: function () {
            if(!this.moreEstFetched){
                axios.get('/ajax').then((response) => {
                    this.moreEstates = response.data;
                    this.estates = this.moreEstates.splice(0, 10);
                    this.moreEstFetched = true;
                });
            }
            var nextEsts = this.moreEstFetched.splice(0, 10);
            
            this.estates.push(nextEsts);
        },
},

computed: {
        one: function () {
            let filteredStates = this.estates.filter((estate) => {
                return (this.keyword.length === 0 || estate.address.includes(this.keyword)) &&
                (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &&
                (this.regions.length === 0 || this.regions.includes(estate.region))});

                if(this.sortType == 'price') {
                    filteredStates = filteredStates.sort((prev, curr) => prev.price - curr.price);
                }
                if(this.sortType == 'created_at') {
                    filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
                }

                filteredStates = filteredStates.filter((estate) => { return estate.price <= this.slider.value});
                filteredStates = filteredStates.filter((estate) => { return estate.extend <= this.sliderX.value});
                filteredStates = filteredStates.filter((estate) => { return estate.m2_price <= this.sliderT.value});

                return filteredStates;
        },
},

<table class="table table-hover">
    <thead>
        <tr style="background-color: #fff ">
            <th scope="col">イメージ</th>
            <th style="width:175px;"scope="col">物件名</th>
            <th style="width:175px;"scope="col">住所</th>
            <th scope="col">販売価格</th>
            <th scope="col">間取り</th>
            <th scope="col">専有面積</th>
            <th scope="col">坪単価</th>
            <th style="width:90px;" scope="col">物件詳細</th>
        </tr>
    </thead>
  <tbody>
        <tr　 v-for="estate in one">
            <td><img id="image" :src="estate.image" alt=""></td>
            <td>{{estate.building_name}}</td>
            <td>{{estate.address}}</td>
            <td>{{priceSep(estate.price)}} 万円</td>
            <td>{{estate.rooms}}</td>
            <td>{{xtendSep(estate.extend)}} m²</td>
            <td>{{estate.m2_price}}</td>
            <td><a :href="/pages/+estate.id">物件詳細</a></td>
        </tr>
  </tbody>
</table>

<button class="btn btn-primary loadmorebutton" @click="handleButton">Load more</button>

Answer 1

Внесены некоторые изменения в ваш код, прочитайте комментарий, чтобы понять.

Но это то же самое, что и последний пост , который вы добавили.

data() {
        return {
            visible:true ,
            estates:[],
            moreEstates: [],
            moreEstFetched: false,
            size: 10,
            selectedPage:0,
            init: false,
            
        }
},
updated: function () { // when loaded, trigger only once
            if (!this.init) {
                this.handleButton();
                this.init = true;
            }
        },
mounted() {
// why is this here, you should only have handleButton to load the data
       // axios.get('/ajax').then((response) => {
        //    this.estates =this.filterData(response.data)
          //  this.insertMarkers();
          //  this.showMore();
     //   });
},

methods: {

        filterData: function (data) {
let filteredStates = data.filter((estate) => {
                return (this.keyword.length === 0 || estate.address.includes(this.keyword)) &&
                (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &&
                (this.regions.length === 0 || this.regions.includes(estate.region))});

                if(this.sortType == 'price') {
                    filteredStates = filteredStates.sort((prev, curr) => prev.price - curr.price);
                }
                if(this.sortType == 'created_at') {
                    filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
                }

                filteredStates = filteredStates.filter((estate) => { return estate.price <= this.slider.value});
                filteredStates = filteredStates.filter((estate) => { return estate.extend <= this.sliderX.value});
                filteredStates = filteredStates.filter((estate) => { return estate.m2_price <= this.sliderT.value});

return filteredStates;
        },
        showMore: function(){
                    if (Math.ceil( this.moreEstates.length / this.size) <= this.selectedPage +1 ){
            this.selectedPage++;
            
       // using slice is better where splice changes the orginal array
            var nextEsts = this.moreEstFetched.slice((this.selectedPage * this.size), this.size);
            
            this.estates.push(nextEsts);
           }else this. visible= true; // hide show more
        
        },

        handleButton: function () {
            if(!this.moreEstFetched){
                axios.get('/ajax').then((response) => {
                    // filter the whole data at once
                    this.moreEstates = this.filterData(response.data);
                    this.moreEstFetched = true;
                    // not sure what this is, i moved it here 
                    this.insertMarkers(); 
                    this.showMore();
                });
            }else this.showMore();
        },
},

<table class="table table-hover">
    <thead>
        <tr style="background-color: #fff ">
            <th scope="col">イメージ</th>
            <th style="width:175px;"scope="col">物件名</th>
            <th style="width:175px;"scope="col">住所</th>
            <th scope="col">販売価格</th>
            <th scope="col">間取り</th>
            <th scope="col">専有面積</th>
            <th scope="col">坪単価</th>
            <th style="width:90px;" scope="col">物件詳細</th>
        </tr>
    </thead>
  <tbody>
        <tr v-for="estate in estates">
            <td><img id="image" :src="estate.image" alt=""></td>
            <td>{{estate.building_name}}</td>
            <td>{{estate.address}}</td>
            <td>{{priceSep(estate.price)}} 万円</td>
            <td>{{estate.rooms}}</td>
            <td>{{xtendSep(estate.extend)}} m²</td>
            <td>{{estate.m2_price}}</td>
            <td><a :href="/pages/+estate.id">物件詳細</a></td>
        </tr>
  </tbody>
</table>

<button v-if="visible" class="btn btn-primary loadmorebutton" @click="handleButton">Load more</button>

Answer 2

На самом деле, я не уверен, что это лучший способ, но я пробовал гораздо более простой способ добиться этого ...

data() {
    return {
        moreEstates: 10,
    }
},

<table class="table table-hover">
  <tbody>
        <tr v-if="moreIndex < one.length"　 v-for="moreIndex in moreEstates">
            <td><img id="image" :src="one[moreIndex].image" alt=""></td>
            <td>{{one[moreIndex].building_name}}</td>
            <td>{{one[moreIndex].address}}</td>
            <td>{{priceSep(one[moreIndex].price)}} 万円</td>
            <td>{{one[moreIndex].rooms}}</td>
            <td>{{xtendSep(one[moreIndex].extend)}} m²</td>
            <td>{{one[moreIndex].m2_price}}</td>
            <td><a :href="/pages/+one[moreIndex].id">物件詳細</a></td>
        </tr>
  </tbody>
</table>

<button class="btn btn-primary loadmorebutton" @click="moreEstates += 10">次の10件を見る</button>

Answer 3

Как @ pyriand3r указал, что запрос axios является асинхронным, вы можете сделать что-то подобное с помощью async / await без слишком большого изменения кода.

methods: {
  handleButton: function () {
      if(!this.moreEstFetched){
           axios.get('/ajax').then(async (response) => {
              this.moreEstates = await response.data;
              this.estates = this.moreEstates.splice(0, 10);
              this.moreEstFetched = true;
          });
      }
// Also you cant splice a boolean only arrays.
      var nextEsts = this.moreEstFetched.splice(0, 10);

      this.estates.push(nextEsts);
  },
},

См. Асинхронное / ожидание в JavaScript