Как разбить вычисляемую собственность на Vue - PullRequest
Новая
       18

Как разбить вычисляемую собственность на Vue

0 голосов
/ 07 ноября 2018

Я создаю приложение 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>

Итак, проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы количество страниц изменялось, когда пользователь фильтрует список с помощью ввода select. Сам список меняется, но количество страниц не меняется, и в итоге вы получаете тонну пустых страниц, когда вы достигнете определенной точки.

Я полагаю, что причина этого заключается в том, что количество страниц устанавливается на основе длины объекта данных заданий. Так как это никогда не изменится, количество страниц остается неизменным. Что мне нужно сделать, так это то, что после запуска метода setPages необходимо очистить массив данных страниц, а затем посмотреть на объект FilterJobs и найти его длину вместо объекта базовых заданий.

Фильтрация FilterJobs является вычисляемым свойством, и я не уверен, как получить длину объекта после его фильтрации.

РЕДАКТИРОВАТЬ: Хорошо, поэтому я добавил это в метод setPages: 

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

вместо 

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

и я обнаружил, что он на самом деле захватывает длину фильтрованных заданий, но, поскольку я запускаю метод paginate для этого вычисляемого свойства, он говорит, что в массиве фильтрованных отсеков в настоящее время есть только 10 элементов и будет добавлена ​​только одна страница разбиения на страницы. Поэтому захват длины отфильтрованных заданий может оказаться не лучшим способом для этого. Возможно, лучше установить переменную данных равной отфильтрованному объекту заданий и взять ее длину.

...