Pagination Vue.js-分页

我有以下分页组件

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

例如，如果用户当前位于最后一个页面上，该页面只有一个项目，如果用户删除该项目，分页链接将重新呈现，但由于该页面不再存在，我将丢失活动禁用类。i、 e.链接应更新，以将用户移动到上一页

 <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>

&拉阔；


{{page}


&拉阔；


导出默认值{
道具：['totalItems'，'pageSize']
数据：函数（）{
返回{
当前页面：1，
页码：[]，
}
},
观察：{
totalItems:函数（）{
var pageScont=Math.ceil（this.totalItems/this.pageSize）；
this.pages=[]；
对于（var i=1；i您可能希望使用Vue实例的属性

 var vm = new Vue({
  data: {
    count: 1
  },
  watch: {
    count: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
})

vue中没有完全等同于
ngOnChanges（）

ngochanges（）
是一个生命周期挂钩，它接受一个对象，该对象将每个更改的属性名称映射到一个SimpleChange对象，该对象包含当前和以前的属性值

如果希望在每次更改
数据
和重新呈现虚拟DOM之前调用生命周期钩子，那么应该使用钩子

但正如在
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;
}

计算：{
第（）页{
var pageArray=[]；
var pageScont=Math.ceil（this.totalItems/this.pageSize）；
对于（var i=1；我想请您看看我更新的代码，并建议我如何在我的vue.js paginator中复制
ngochanges（）
代码？@VamsiKrishna也许您可以帮助我。请看以下内容：请投票选出所有对您有帮助的答案：）