Dynamically setting the page variable for a datatable-pager only changes the UI

So I have this datatable-pager

<datatable-pager type="abbreviated" v-model="page" :per-page="per_page"></datatable-pager>

And the ‘page’ variable set up:

data() {
      return {
          page: 1,
          per-page: 10
      }
}

Whenever I set the ‘page’ variable to a different value from the code dynamically, like this for example:

this.page = 3;

The only thing that changes is the UI of the datatable-pager to the selected page, but the displayed data doesn’t change, it is still the data of the previous page.

[sobiero]

So I have this datatable-pager <datatable-pager type="abbreviated" v-model="page" :per-page="per_page"></datatable-pager> And the ‘page’ variable set up:

data() {
      return {
          page: 1,
          per-page: 10
      }
}

Whenever I set the ‘page’ variable to a different value from the code dynamically, like this for example: this.page = 3; The only thing that changes is the UI of the datatable-pager to the selected page, but the displayed data doesn’t change, it is still the data of the previous page.

You probably need to call this.$refs.vueDatatable.processRows(); after updating the page variable. Please see issues #63 and #43

Please be more clear. My “this.$refs” is an empty object. How do I include my vue datatable in $refs? and is ‘vueDatatable’ supposed to be the table ID? Thank you.

Sorry, I assumed you had used refs before… Give your datatable a ref i.e. <datatable ref="myAwesomeTable" ..... > </datatable> then call it as this.$refs.myAwesomeTable.processRows();

[GerkinDev]

Try out the v2.0.0-alpha.0 that I’ve just published. If this version does not solve your issue, please post a fiddle with a minimal repro, or we can’t help.