Vue + Vue-Paginate: массив не будет обновляться после опустошения - PullRequest
Новая
       7

Vue + Vue-Paginate: массив не будет обновляться после опустошения

0 голосов
/ 01 июня 2018

Я использую 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" в моем поиске, отобразятся результаты для банана и барбекю.Если бы я набрал "ba", то результат для барбекю был удален, и как только я вернул поиск на "b", он снова отобразился бы, как и ожидалось.

Если я наберу "bx", то все результаты будут удалены, и когда яВозврат поиска на "b", Результаты не появляются .

Есть идеи, почему это может произойти?

ОБНОВЛЕНИЕ

Когда я проверяю компонент в хроме, я вижу: 

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

Даже если значение list равно: 

list:Array[222]

1 Ответ

0 голосов
/ 01 июня 2018

Я нашел хакерский обходной путь, который исправил его для моего приложения.Сначала я добавил 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)
    }
  }
}

Необходим тайм-аутв противном случае компонент считал, что страницы нет.

...