Vue.js Vue+；Vue分页：数组一旦为空就不会刷新

我在我的应用程序中使用，我注意到，一旦我的数组为空，将其值刷新到包含内容的数组中时不会显示

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

即使

列表

道具是：

list:Array[222]

---

我找到了一个黑客解决方案，为我的应用程序修复了它。首先，我在我的

组件

ref=“paginator”

中添加了一个

ref

。然后我创建了一个计算属性：

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

然后，我创建了一个监视程序，用于查找从length==0到length！=0:

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

---

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

我找到了一个解决方法，为我的应用程序修复了它。首先，我在我的

组件

ref=“paginator”

中添加了一个

ref

。然后我创建了一个计算属性：

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

然后，我创建了一个监视程序，用于查找从length==0到length！=0:

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

---

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

Paginate需要一个键，以便知道在它查看的集合达到零长度后何时重新渲染。如果您向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
>

---

请参阅，以获得更深入的答案。

Paginate需要一个键，以便在其查看的集合长度达到零后知道何时重新渲染。如果您向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
>

---

请参阅以获得更深入的答案。

在元素中使用：键存在某些错误。如果在表上进行多次搜索，则它将无法正常工作。在这种情况下，输入将因键入单个字符而失去焦点。以下是更好的选择：

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)
    }
  }
},

---

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

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)
    }
  }
},

---

请同时显示您的JS代码。特别是当你更新了

recipes

的值时，这是vue paginate的一个bug，请同时显示你的JS代码。尤其是当你更新了

recipes

的值时，这是vue paginate的一个bug