CODEWITHSUNDEEP
vue.jspaginationasync-await
Rattrap
Rattrap

Reputation: 315

Vue.js :click-handler

<paginate v-model="page" :page-count="pageCount" :container-class="'pagination'" :click-handler="clickCallback(page)" prev-text="‹" next-text="›"></paginate>

...
data: {
    page: 1
},
methods: {
    clickCallback: async function(page) {
    ...
  }
...

When I click on page in pagination block an error occurs:

[Vue warn]: Invalid prop: type check failed for prop "clickHandler". Expected Function, got Promise.

How to handle it?

Upvotes: 0

Views: 1154

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14269

The property does not accept Promises - only synchronous functions. Either wrap your async function inside a synchronous wrapper or put the async part of the function into another function:

<paginate v-model="page" :page-count="pageCount" 
  :container-class="'pagination'" 
  :click-handler="clickCallback(page)" prev-text="‹" next-text="›">
</paginate>

...
data: {
    page: 1
},
methods: {
    clickCallback: function(page) {
    ...
    this.asyncFunction(param1,....);
    ...
  }
  asyncFunction: async function(p1) 
  { 
    ...
  }
...

Upvotes: 2

Related Questions