是否要在数据属性中使用计算的属性值?

时间:2018-11-07 15:28:26

标签: javascript vue.js computed-properties

我正在尝试从计算属性中获取一个数组,并将其添加到Vue应用程序中的data属性中。我这样做的原因是我正在调用的方法,我需要该计算属性中数组的长度。所以我有:

var app = new Vue({
    el: '#app',
    data() {
      return {
        //assigning the jobs JSON data to this variable
        jobs: jsonData,
        jobsFiltered: //this is where the computed property variable should go.

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

computed: {

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

    return this.paginate(filteredList);
  }

}


})

所以我需要做的是我需要将JobsFiltered的数据变量设置为filteredList的计算属性中的变量。我需要这样做的原因是在setPages方法的numberOfPages变量中添加了filteredList数组的长度:

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

所以在说this.jobs.length的地方,我实际上需要获取filteredList数组的长度,并且我不确定当我试图获取其长度的数组是计算属性时该怎么做。

编辑:添加更多的清晰度,我在计算属性中的filteredJobs函数中的filteredList变量上运行paginate方法。因此,该操作是在该filteredList变量上运行slice方法,并且一次只给我10个数组项。因此,当我执行this.filteredJobs.length时,它会看到长度为10,而没有得到完整长度。当我实际上需要在运行slice方法之前需要数组的长度时。

0 个答案:

没有答案