Vue.js - Pagination

Question

i具有以下分页组件。

如果用户动态地添加了删除项目，即通过一些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()是一种生命周期钩，它将绘制一个对象，该对象将每个更改的属性名称映射到 simplechange 持有当前和先前属性值的对象。

如果您想要在data的每次更改和重新呈现虚拟DOM之前被调用的生命周期挂钩，则应使用beforeUpdate()钩。

但是，就像在ngOnChanges()中一样，您无法掌握哪个属性已更新，或者是旧值或newValue是。

AS 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;
}

计算的属性是根据其依赖性缓存的。仅当您的某些依赖关系发生变化时，计算的属性才会重新评估 totalItems和pageSize

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

Answer 2

您可能要使用vue实例的 watch属性。

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