Question

我在我的应用中使用vue-paginate并且我注意到，一旦我的数组为空，将其值更新为数组，内容不会显示。

<paginate
  name="recipes"
  :list="recipes"
  :per="16"
  class="p-0"
>
    <transition-group name="zoom">
        <div v-for="recipe in paginated('recipes')" :key="recipe.id">

            <recipe class=""  
                :recipe="recipe" 
                :ref="recipe.id" 
            ></recipe>

        </div>
    </transition-group>
</paginate>

这是事物的显示方式，我的recipe数组会根据搜索而变化。如果我在我的搜索中键入"b"，则会显示banana和bbq的结果。如果我输入"ba"，则会删除bbq的结果，并且一旦我将搜索退格到"b"，它就会按预期重新显示。

如果我输入"bx"，则会删除所有结果，当我将搜索退格至"b"时，不会重新显示结果。

知道为什么会这样吗？

更新

当我在chrome中检查组件时，我看到：

currentPage:-1
pageItemsCount:"-15-0 of 222"

即使list道具是：

list:Array[222]

Answer 1

分页码需要一个键，以便知道正在查看的集合达到零长度后何时重新渲染。如果您向paginate元素添加键，那么事情应该会按预期运行。

<paginate
  name="recipes"
  :list="recipes"
  :per="16"
  class="p-0"
  :key="recipes ? recipes.length : 0" // You need some key that will update when the filtered result updates
>

请参阅"Filtering the paginated list" is not working on vue-paginate node，以获取更深入的答案。

Answer 2

在元素中使用 :key 有一些错误。如果您在表格上进行多次搜索，它将无法正常工作。在这种情况下，输入将通过键入单个字符失去焦点。这是更好的选择：

computed:{
    searchFilter() {
      if(this.search){
         //Your Search condition
     }
    }
  },

watch:{
  searchFilter(newVal,oldVal){
    if ( newVal.length !==0 && oldVal.length ===0 ) {
      setTimeout(() => {
        if (this.$refs.paginator) {
          this.$refs.paginator[0].goToPage(1)
        }
      }, 50)
    }
  }
},

Answer 3

我找到了一个针对我的应用修复它的hacky解决方法。首先，我向ref组件<paginate></paginate>添加了ref="paginator"。然后我创建了一个计算属性：

emptyArray () {
    return store.state.recipes.length == 0
}

然后我创建了一个观察者，它寻找从长度== 0到长度的变化！= 0：

watch: {
  emptyArray: function(newVal, oldVal) {
    if ( newVal === false && oldVal === true ) {
      setTimeout(() => {
        if (this.$refs.paginator) {
          this.$refs.paginator.goToPage(page)
        }
      }, 100)
    }
  }
}

超时是必要的，否则组件认为没有第1页。

Vue + Vue-Paginate：数组一旦空，就不会刷新

3 个答案: