Question

尝试创建更多加载按钮，当用户单击该按钮时，会将更多项目添加到页面中。但是按钮代码无法正常运行...我仍然可以看到页面中的所有项目，并且控制台中也没有错误。.当然，按钮不起作用。

此外，尝试使它与过滤器功能一起运行。.谢谢您的帮助。

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

@ 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);
  },
},

See: Async/await in JavaScript

Answer 2

对代码进行了一些更改，请阅读注释以了解。

但这与您添加的最后一个post相同。

class B(whatever_it_receives_as_long_as_child_of_SuperType) : whatever_it_receives_as_long_as_child_of_SuperType()

class C : A(B())    // B is subtype of SuperType so it's ok

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();
        },
},

Answer 3

实际上，我不确定这是最好的方法，但是尝试了更简单的方法来实现它...

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>

在Vue中使负载更多功能

3 个答案: