Question

我正在创建一个Vue应用程序，其中将显示作业列表，并且此数据来自JSON对象。在此应用程序中，我还添加了过滤功能以及分页功能。所以我到目前为止是：

    <div id="app" v-cloak>

<h2>Location</h2>
<select v-model="selectedLocation" v-on:change="setPages">
  <option value="">Any</option>
  <option v-for="location in locations" v-bind:value="location" >{{ location }}</option>
</select>

<div v-for="job in jobs">

  <a v-bind:href="'/job-details-page/?entity=' + job.id"><h2>{{ job.title }}</h2></a>
  <div v-if="job.customText12"><strong>Location:</strong> {{ job.customText12 }}</div>

</div>

<div class="paginationBtns">
  <button type="button" v-if="page != 1" v-on:click="page--">Prev</button>
  <button type="button" v-for="pageNumber in pages.slice(page-1, page+5)" v-on:click="page = pageNumber"> {{pageNumber}} </button>
  <button type="button" v-if="page < pages.length" v-on:click="page++">Next</button>
</div>

<script>

  var json = <?php echo getBhQuery('search','JobOrder','isOpen:true','id,title,categories,dateAdded,externalCategoryID,employmentType,customText12', null, 200, '-dateAdded');?>;
  json = JSON.parse(json);
  var jsonData = json.data;

  var app = new Vue({
    el: '#app',
    data() {
      return {
        //assigning the jobs JSON data to this variable
        jobs: jsonData,

        locations: ['Chicago', 'Philly', 'Baltimore'],

        //Used to filter based on selected filter options
        selectedLocation: '',

        page: 1,
        perPage: 10,
        pages: [],
      }
    },

    methods: {
        setPages () {
          this.pages = [];
          let numberOfPages = Math.ceil(this.jobs.length / this.perPage);
          for (let i = 1; i <= numberOfPages; i++) {
            this.pages.push(i);
          }
        },

        paginate (jobs) {
          let page = this.page;
          let perPage = this.perPage;
          let from = (page * perPage) - perPage;
          let to = (page * perPage);
          return  jobs.slice(from, to);
        },
    }

    watch: {
      jobs () {
        this.setPages();
      }
    },

        })


computed: {

  filteredJobs: function(){
    var filteredList = this.jobs.filter(el=> {
      return el.customText12.toUpperCase().match(this.selectedLocation.toUpperCase())
    });

    return this.paginate(filteredList);
  }

}


  </script>

因此，我遇到的问题是，当用户使用选择输入过滤列表时，我希望更改页面的数量。列表本身会更改，但页面数量不会更改，一旦超过某个点，最终将导致大量的空白页面。

我相信发生这种情况的原因是，根据作业数据对象的长度设置了页面数量。由于那永远不会改变，因此页面的数量也保持不变。我需要做的是，一旦运行setPages方法，就需要清空页面数据数组，然后查看filteredJobs对象并找到其长度，而不是基本作业对象。

filteredJobs过滤是一个计算属性，我不确定一旦过滤后如何获取对象的长度。

编辑：好的，所以我将其添加到setPages方法中：

let numberOfPages = Math.ceil(this.filteredJobs.length / this.perPage);

代替

let numberOfPages = Math.ceil(this.jobs.length / this.perPage);

，我发现它实际上是在抓住filterdJobs的长度，但是由于我在该计算属性上运行了paginate方法，所以说当前filteredJobs数组中只有10个项目，并且只会添加一个分页页面。因此，抓住filterdJobs的长度可能不是最佳方法。可能将数据变量设置为等于过滤后的作业对象可能会更好，并且要把握长度。

如何在Vue中对计算属性进行分页

0 个答案: