CODEWITHSUNDEEP
javascriptvue.jsvuexpagination
Chris Michael
Chris Michael

Reputation: 329

Problems with paging in vuex store/actions [this.paginator is not a function]

I am trying to solve a problem when I call the paginator function in [ACTYPE.GET_MOVIES].

It shows me the error that says the following:

TypeError: _this.paginator is not a function at eval (actions.js? 63e0: 13)

Store/Actions.js

import {ACTYPE} from './types/actions_types';
import {MUTYPE} from './types/mutations_types';
import {BASE_URL , TOP_MOVIES , QUERY_URL} from '../API_URLs/index';
import axios from 'axios';

const A = axios.create({ baseURL: String(BASE_URL) });

export const actions = {
  [ACTYPE.GET_MOVIES]({commit} , page){
  A.get(TOP_MOVIES).then((res) =>{
    console.log(res);
    const dataPaginated = this.paginator(res.data , page)
    commit(MUTYPE.SET_MOVIES_DATA , dataPaginated);
    commit(MUTYPE.IS_LOADING , false);
  }).catch((err) =>{
      console.log(err);
  });  
}, 

paginator(items, page, per_page){
  var page = page || 1,
  per_page = per_page || 10,
  offset = (page - 1) * per_page,

  paginatedItems = items.slice(offset).slice(0, per_page),

  total_pages = Math.ceil(items.length / per_page),

  paginContent = {
    page: page,
    per_page: per_page,
    pre_page: page - 1 ? page - 1 : null,
    next_page: (total_pages > page) ? page + 1 : null,
    total: items.length,
    total_pages: total_pages,
    data: paginatedItems
  };
  console.log("Paginate Item: " , paginatedItems);
  console.log("Pagin Content: " , paginContent);
  return paginContent.data;
 },

Upvotes: 0

Views: 673

Answers (1)

Dario Cavanillas
Dario Cavanillas

Reputation: 96

you should change your paginator(items, page, per_page){ ...

to function paginator(items, page, per_page){

That way the declaration gets hoisted. If not paginator is not declared.

then you can remove the this in this.paginator(res.data , page)

After doing that it should work

Upvotes: 1

Related Questions