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 实例的 watch 属性。

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

Answer 2

vue 中没有完全等同于ngOnChanges()。

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

如果您希望在 data 的每次更改之后和重新渲染虚拟 DOM 之前调用生命周期挂钩，那么您应该使用 beforeUpdate() 挂钩。

但就像在ngOnChanges() 中一样，您无法掌握更新的属性或旧值或新值是什么。

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

在 watcher 中，你可以看到 oldValue 是什么，新值是什么

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

现在您可以像普通的data 属性一样使用pages 计算属性