每个页面上的 Vue.js 索引和长度重置

Question

我遇到了一个我无法解决的奇怪问题。我想在 for-each 循环中添加 index 数字并在我的 vue.js 组件中添加总数据计数。我设法做到了，但是我的计数器在分页中的每个页面上都会重置，并且items.lenght 只计算当前分页页面中的数据。我做了以下事情：

<tr v-for="(item, index) in items" v-bind:key="item.id">
    <td>{{index + 1}}</td>
    <td>{{item.name}}</td>
</tr>

并统计所有数据：

<div class="form-group">
    Total data: {{items.length}}
</div>

分页第一页一切正常，但是当我选择第二页时，它只计算该特定页面的总数据，并且计数器再次从 1 开始。为了说明，在第一页它显示我总共有 15 个数据（我有大约 300 个），并且索引很好：

如果我转到第二页，它仍然显示相同的总数，并且索引再次从 1 开始，我希望它继续（例如 16、17..）

部分 Vue.js 组件：

mounted() {
            this.getStatuses();
            this.getSchoolYears();

            if (this.items.length == 0) {
                this.loadPage(this.pagination.current_page);
                this.getObjects();
            }
        },
        methods: {
            getSaveStateConfig() {
                return {
                    'cacheKey': 'ApplicationComponent',
                };
            },
            addFilter(key, value) {
                this.filters = this.filters.filter(function (obj) {
                    return obj.key !== key;
                });
                this.pagination.current_page = 1;
                this.filters.push({key: key, value: value});
            },
            loadPageDebounce: _.debounce(function (page, parameters) {
                this.loadPage(page);
            }, 500),
            loadPage(page, parameters) {

                var parameters = '';
                this.filters.forEach(function (obj, index) {
                    parameters = parameters + '&' + obj.key + '=' + obj.value;
                });
                var $this = this;
                axios({
                    method: 'GET',
                    url: '/api/applications?page=' + page + parameters,
                    headers: {'X-CSRF-TOKEN': window.csrfToken, 'X-Requested-With': 'XMLHttpRequest'},
                })
                    .then(function (response) {
                        // console.log('resposne', response);
                        $this.items = response.data.data
                        $this.pagination.total = response.data.total;
                        $this.pagination.last_page = response.data.last_page;
                        $this.pagination.current_page = response.data.current_page;
                        $this.pagination.from = response.data.from;
                        $this.pagination.to = response.data.to;
                        $this.pagination.next_page_url = response.data.next_page_url;
                        $this.pagination.prev_page_url = response.data.prev_page_url;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            loadData() {
                this.loadPage(this.pagination.current_page, this.filters);
            },

在使用 vue.js 分页时如何防止这种情况发生。所有帮助表示赞赏。

Answer 1

我猜这不是最好的解决方案，但它应该可以快速解决。

<tr v-for="(item, index) in items" v-bind:key="item.id">
    <td>{{(pagination.current_page*15)-15 + index+1}}</td>
    <td>{{item.name}}</td>
</tr>

编辑了更好的解决方案作为计算函数来分离视图和逻辑：

<tr v-for="(item, index) in items" v-bind:key="item.id">
    <td>{{getOverallIndex(index)}}</td>
    <td>{{item.name}}</td>
</tr>

computed: {
    getOverallIndex: function(index) {
      return this.pagination.current_page*15)-15 + index + 1
    }
  }

Answer 2

在你的方法中，你有：

.then(function (response) {
         $this.items = response.data.data
         $this.pagination.total = response.data.total; // THERE

如果你有好的后端代码，你应该在这里得到你的总数。

所以尝试在该函数之后console.log($this.pagination.total) 或在该函数中console.log(response.data.total)。如果你有 15 而不是 300，那是你的后端错误。可能是在 axios 上绑定this 的问题。

如果你创立了它，请告诉我。

祝你好运！

Answer 3

试试看

<tr v-for="(item, index) in items" v-bind:key="item.id">
    <td>{{items.indexOf(item)+1}}</td>
    <td>{{item.name}}</td>
</tr>