pagination - Vue.js - 分页

Question

我有以下分页组件。

如果用户动态添加删除项目，即通过某些 ajax 调用，我如何确保在分页链接上应用正确的事件或禁用类？

例如，如果用户当前位于只有 1 个项目的最后一页，如果用户删除该项目，分页链接将重新呈现，但随后我会丢失事件禁用类，因为该页面不再存在。即链接应更新以将用户移至上一页。

 <div class="comment-pager ">
    <div class="panel panel-default panel-highlight no-border ">
        <div class="panel-body padded-5">
            <nav v-if="totalItems > pageSize">
                <ul class="pagination">
                    <li v-bind:class="[currentPage == 1 ? disabled : '']">
                        <a v-on:click.prevent="previous()" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li v-bind:class="[currentPage == pages ? active : '']" v-for="page in pages" v-on:click.prevent="changePage(page)">
                        <a>{{ page }}</a>
                    </li>
                    <li v-bind:class="[currentPage == pages.length ? disabled : '']">
                        <a v-on:click.prevent="next()" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>  
        </div>
   </div>
</div>     


</template>

<script>

export default {

    props: ['totalItems', 'pageSize']

    data: function () {

        return {
            currentPage: 1,
            pages: [],
        }

    },

    watch: {
        totalItems: function () {

           var pagesCount = Math.ceil(this.totalItems / this.pageSize); 
           this.pages = [];
           for (var i = 1; i <= pagesCount; i++)
            this.pages.push(i);  
        }
    },

    methods: {

        changePage: function (page){

            this.currentPage = page; 
            this.$emit('pageChanged', page);
        }

        previous: function (){
            if (this.currentPage == 1)
                return;

            this.currentPage--;

            this.$emit('pageChanged', this.currentPage);
        }

        next: function () {
            if (this.currentPage == this.pages.length)
                return; 

            this.currentPage++;

            this.$emit('pageChanged', this.currentPage);
        }
    },

}


</script>

  <paginator v-bind:total-items="totalItems" v-bind:page-size="query.pageSize" v-on:pageChanged="onPageChange"></paginator>

Answer 1

vue 中没有与 ngOnChanges() 完全等效的函数。

ngOnChanges() 是一个生命周期 Hook ，它接收一个对象，该对象将每个更改的属性名称映射到保存当前和先前属性值的 SimpleChange 对象。

如果您希望在数据每次更改之后以及重新渲染虚拟 DOM 之前调用生命周期 Hook ，那么您应该使用 beforeUpdate()钩子(Hook)。

但是就像在 ngOnChanges() 中一样，您无法掌握更新了哪个属性或者它的 oldvalue 或 newValue 是什么。

正如mklimek回答的那样，您可以设置watcher在您想要监视更改的属性上。

在观察者中，你可以得到旧值是什么以及它改变后的新值是什么

new Vue({
    el:'#app',
    data:{
        prop1: '',
        prop2: '' // property to watch changes for
    },
    watch:{
        prop@(newValue, oldValue){
            console.log(newValue);
            console.log(oldValue);
        }
    }
});

编辑

对于您的情况，您不需要观察者。您可以将 pages[] 属性设置为计算属性:

computed:{
    pages(){
        var pageArray = [];
        var pagesCount = Math.ceil(this.totalItems / this.pageSize); 
        
        for (var i = 1; i <= pagesCount; i++)
            pages.push(i);
        }
        return pageArray;
}

computed properties根据它们的依赖关系进行缓存。仅当计算属性的某些依赖项在您的情况下发生更改时，计算属性才会重新评估 totalItems 和 pageSize

现在您可以将 pages 计算属性用作普通 data 属性