Vue + Vue-Paginate: Array will not refresh once empty

Question

I am using vue-paginate in my app and I've noticed that once my array is empty, refreshing its value to an array with contents does not display.

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

This is how things get displayed, and my recipe array changes depending on a search. If I type in "b" into my search, results for banana, and bbq would show. If I typed "ba" the result for bbq is removed, and once I backspace the search to "b" it would re-appear as expected.

If I type "bx" every result is removed and when I backspace the search to "b", no results re-appear.

Any idea why this might happen?

UPDATE

When I inspect the component in chrome I see:

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

Even though the list prop is:

list:Array[222]

please show your JS code as well. Especially where you updated the value of recipes — Jacob Goh
– Jacob Goh, Commented Jun 1, 2018 at 4:27
It's a bug of vue-paginate github.com/TahaSh/vue-paginate/pull/95 — ittus
– ittus, Commented Jun 1, 2018 at 4:46

EmacsVI · Accepted Answer · 2020-01-07 22:12:17Z

2

Paginate needs a key in order to know when to re-render after the collection it's looking at reaches a length of zero. If you add a key to the paginate element, things should function as expected.

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

See "Filtering the paginated list" is not working on vue-paginate node for a slightly more in depth answer.

answered Jan 7, 2020 at 22:12

EmacsVI

5711 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Thomas · Accepted Answer · 2018-06-01 14:04:42Z

1

I found a hacky workaround that fixed it for my app. First, I added a ref to my <paginate></paginate> component ref="paginator". Then I created a computed property:

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

then I created a watcher that looks for a change from length == 0 to length != 0:

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

The timeout was necessary otherwise the component thought there was no page 1.

answered Jun 1, 2018 at 14:04

Jeremy Thomas

6,81411 gold badges57 silver badges106 bronze badges

Comments

Kruti · Accepted Answer · 2021-01-04 10:14:11Z

1

Using :key in the element has certain bugs. It will not work properly if you have multiple search on the table. In that case input will lose focus by typing single character. Here is the better alternative:

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

answered Jan 4, 2021 at 10:14

Kruti

1591 silver badge4 bronze badges

Collectives™ on Stack Overflow

Vue + Vue-Paginate: Array will not refresh once empty

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related