Showing Pagination in VueJS :)

pagination.vue

<template>
    <table>
        <tr
            v-for="(item,index) in pageItems"
            :key="'name_'+item.name+'_'+index">
            
            <td>{{item}}</td>
        </tr>
    </table>
    
    <hr style="margin: 2rem 0;">
    
    <div style="display: flex;">
        <button @click="onPreviousPage()">Previous</button>
        <div style="margin: 0 1rem;">
            currentPage: {{startIndex + 1}}
        </div>
        <button @click="onNextPage()">Next</button>
    </div>
</template>

<script>
export default {
    computed:{
        pageItems(){
            const startIndexNew = (this.startIndex * this.itemsPerPage);
            const endIndex = startIndexNew + this.itemsPerPage;
            return this.myArray.slice( startIndexNew, endIndex );
        }
    },
    
    data(){
        return {
            myArray: [
                {
                    firstname:  'Kippar',
                    lastname:  'Mullane',
                    email: 'kmullanea@noaa.gov',
                },
                {
                    firstname:  'Dominik',
                    lastname:  'Hentze',
                    email: 'dhentzeb@marriott.com',
                },
                {
                    firstname:  'Kore',
                    lastname:  'Kempster',
                    email: 'kkempsterc@webnode.com',
                },
                {
                    firstname:  'Fernande',
                    lastname:  'Van',
                    email: 'fvand@delicious.com',
                },
                {
                    firstname:  'Sheppard',
                    lastname:  'Gowling',
                    email: 'sgowlinge@tuttocitta.it',
                },
                {
                    firstname:  'Konstanze',
                    lastname:  'Summergill',
                    email: 'ksummergillf@wp.com',
                },
                {
                    firstname:  'Murray',
                    lastname:  'McGifford',
                    email: 'mmcgiffordg@amazon.com',
                },
                {
                    firstname:  'Locke',
                    lastname:  'Bartot',
                    email: 'lbartoth@vinaora.com',
                },
                {
                    firstname:  'Filberte',
                    lastname:  'Coopey',
                    email: 'fcoopeyi@freewebs.com',
                },
                {
                    firstname:  'Ogden',
                    lastname:  'Killeley',
                    email: 'okilleleyj@histats.com',
                },
                {
                    firstname:  'Anallise',
                    lastname:  'Debill',
                    email: 'adebillk@loc.gov',
                },
                {
                    firstname:  'Allan',
                    lastname:  'Moores',
                    email: 'amooresl@github.com',
                },
                {
                    firstname:  'Micah',
                    lastname:  'Cowdroy',
                    email: 'mcowdroym@eventbrite.com',
                },
                {
                    firstname:  'Zane',
                    lastname:  'Chopping',
                    email: 'zchoppingn@bloglines.com',
                },
                {
                    firstname:  'Vinita',
                    lastname:  'Speeks',
                    email: 'vspeekso@telegraph.co',
                },
                {
                    firstname:  'Ashla',
                    lastname:  'Aspenlon',
                    email: 'aaspenlonp@cmu.edu',
                },
                {
                    firstname:  'Samuel',
                    lastname:  'Hayward',
                    email: 'shaywardq@state.tx',
                },
                {
                    firstname:  'Merwyn',
                    lastname:  'Sendley',
                    email: 'msendleyr@ft.com',
                },
                {
                    firstname:  'Wally',
                    lastname:  'Garnsworthy',
                    email: 'wgarnsworthys@behance.net',
                },
                {
                    firstname:  'Mitch',
                    lastname:  'Bensley',
                    email: 'mbensleyt@gnu.org',
                },
                {
                    firstname:  'Libbey',
                    lastname:  'Raffeorty',
                    email: 'lraffeortyu@cam.ac',
                },
                {
                    firstname:  'Melitta',
                    lastname:  'Happer',
                    email: 'mhapperv@linkedin.com',
                },
                {
                    firstname:  'Olivie',
                    lastname:  'Innes',
                    email: 'oinnesw@com.com',
                },
                {
                    firstname:  'Minette',
                    lastname:  'Goodridge',
                    email: 'mgoodridgex@alibaba.com',
                },
                {
                    firstname:  'Bria',
                    lastname:  'Cadore',
                    email: 'bcadorey@imdb.com',
                },
                {
                    firstname:  'Ignace',
                    lastname:  'Borrott',
                    email: 'iborrottz@businessweek.com',
                },
                {
                    firstname:  'Mortie',
                    lastname:  'Burnsyde',
                    email: 'mburnsyde10@huffingtonpost.com',
                },
                {
                    firstname:  'Lenee',
                    lastname:  'Crutchfield',
                    email: 'lcrutchfield11@barnesandnoble.com',
                },
                {
                    firstname:  'Ahmed',
                    lastname:  'Le Blanc',
                    email: 'caleblanc12@alexa.com',
                },
                {
                    firstname:  'Alexandr',
                    lastname:  'Klaas',
                    email: 'aklaas13@illinois.edu',
                },
                {
                    firstname:  'Lelia',
                    lastname:  'Wapol',
                    email: 'lwapol14@delicious.com',
                },
                {
                    firstname:  'Lonee',
                    lastname:  'Robyns',
                    email: 'lrobyns15@lycos.com',
                },
                {
                    firstname:  'Frants',
                    lastname:  'Johantges',
                    email: 'fjohantges16@dailymotion.com',
                },
                {
                    firstname:  'Mirabella',
                    lastname:  'Eilert',
                    email: 'meilert17@elegantthemes.com',
                },
                {
                    firstname:  'Fredra',
                    lastname:  'Scawn',
                    email: 'fscawn18@npr.org',
                },
                {
                    firstname:  'Simone',
                    lastname:  'Muscroft',
                    email: 'smuscroft19@flickr.com',
                },
                {
                    firstname:  'Ludwig',
                    lastname:  'Brunner',
                    email: 'lbrunner1a@blogspot.com',
                },
                {
                    firstname:  'Bradan',
                    lastname:  'McMichael',
                    email: 'bmcmichael1b@geocities.jp',
                },
                {
                    firstname:  'Sybille',
                    lastname:  'Biaggelli',
                    email: 'sbiaggelli1c@homestead.com',
                },
                {
                    firstname:  'Bud',
                    lastname:  'Alebrooke',
                    email: 'balebrooke1d@myspace.com',
                },
                {
                    firstname:  'Dido',
                    lastname:  'Gibbeson',
                    email: 'dgibbeson1e@quantcast.com',
                },
                {
                    firstname:  'Jeralee',
                    lastname:  'Newtown',
                    email: 'jnewtown1f@jiathis.com',
                },
                {
                    firstname:  'Derril',
                    lastname:  'Partner',
                    email: 'dpartner1g@foxnews.com',
                },
                {
                    firstname:  'Reine',
                    lastname:  'Meads',
                    email: 'rmeads1h@skyrock.com',
                },
                {
                    firstname:  'Daisi',
                    lastname:  'Beltzner',
                    email: 'dbeltzner1i@desdev.cn',
                },
                {
                    firstname:  'Donall',
                    lastname:  'Hebner',
                    email: 'dhebner1j@privacy.gov',
                },
                {
                    firstname:  'Kristien',
                    lastname:  'Chettle',
                    email: 'kchettle1k@army.mil',
                },
                {
                    firstname:  'Tildy',
                    lastname:  'Mcimmie',
                    email: 'tmcimmie1l@bloglovin.com',
                },
                {
                    firstname:  'Ted',
                    lastname:  'Scotting',
                    email: 'tscotting1m@jalbum.net',
                },
                {
                    firstname:  'Salmon',
                    lastname:  'Kryszkiecicz',
                    email: 'skryszkiecicz1n@google.nl',
                },
                {
                    firstname:  'Farlee',
                    lastname:  'Dissman',
                    email: 'fdissman1o@blinklist.com',
                },
                {
                    firstname:  'Bobbe',
                    lastname:  'Stobbe',
                    email: 'bstobbe1p@hostgator.com',
                },
                {
                    firstname:  'Ruthe',
                    lastname:  'Osgood',
                    email: 'rosgood1q@msn.com',
                },
                {
                    firstname:  'Aubrey',
                    lastname:  'Dales',
                    email: 'adales1r@marriott.com',
                },
                {
                    firstname:  'Mozelle',
                    lastname:  'Suggitt',
                    email: 'msuggitt1s@hatena.ne',
                },
                {
                    firstname:  'Rebecka',
                    lastname:  'Elliss',
                    email: 'relliss1t@springer.com',
                },
                {
                    firstname:  'Lesya',
                    lastname:  'Kidstoun',
                    email: 'lkidstoun1u@cbslocal.com',
                },
                {
                    firstname:  'Paxon',
                    lastname:  'McKeevers',
                    email: 'pmckeevers1v@usda.gov',
                },
                {
                    firstname:  'Ave',
                    lastname:  'Sherewood',
                    email: 'asherewood1w@examiner.com',
                },
                {
                    firstname:  'Egbert',
                    lastname:  'Dyers',
                    email: 'edyers1x@howstuffworks.com',
                },
                {
                    firstname:  'Averil',
                    lastname:  'MacAlinden',
                    email: 'amacalinden1y@wordpress.org',
                },
                {
                    firstname:  'Niles',
                    lastname:  'MacBain',
                    email: 'nmacbain1z@ebay.co',
                },
                {
                    firstname:  'Billy',
                    lastname:  'Siggins',
                    email: 'bsiggins20@oaic.gov',
                },
                {
                    firstname:  'Milzie',
                    lastname:  'Woodhead',
                    email: 'mwoodhead21@imdb.com',
                },
                {
                    firstname:  'Adlai',
                    lastname:  'Churchin',
                    email: 'achurchin22@marriott.com',
                },
                {
                    firstname:  'Linzy',
                    lastname:  'Pepperell',
                    email: 'lpepperell23@businesswire.com',
                },
                {
                    firstname:  'Tiffanie',
                    lastname:  'Getley',
                    email: 'tgetley24@de.vu',
                },
                {
                    firstname:  'Richart',
                    lastname:  'Zanotti',
                    email: 'rzanotti25@purevolume.com',
                },
                {
                    firstname:  'Norman',
                    lastname:  'Seagood',
                    email: 'nseagood26@pcworld.com',
                },
                {
                    firstname:  'Darya',
                    lastname:  'O',
                    email: 'Currigan,docurrigan27@amazon',
                },
                {
                    firstname:  'Em',
                    lastname:  'Bradburne',
                    email: 'ebradburne28@flickr.com',
                },
                {
                    firstname:  'Teodorico',
                    lastname:  'Ivankov',
                    email: 'tivankov29@nature.com',
                },
                {
                    firstname:  'Kin',
                    lastname:  'Behling',
                    email: 'kbehling2a@dagondesign.com',
                },
                {
                    firstname:  'Peter',
                    lastname:  'Borg',
                    email: 'pborg2b@ehow.com',
                },
                {
                    firstname:  'Isador',
                    lastname:  'Hughesdon',
                    email: 'ihughesdon2c@mit.edu',
                },
                {
                    firstname:  'Tyrone',
                    lastname:  'Wride',
                    email: 'twride2d@dyndns.org',
                },
                {
                    firstname:  'Rebbecca',
                    lastname:  'Hincham',
                    email: 'rhincham2e@gravatar.com',
                },
                {
                    firstname:  'Wheeler',
                    lastname:  'Pearmain',
                    email: 'wpearmain2f@nbcnews.com',
                },
                {
                    firstname:  'Mitchel',
                    lastname:  'Hellcat',
                    email: 'mhellcat2g@ovh.net',
                },
                {
                    firstname:  'Maridel',
                    lastname:  'Shepcutt',
                    email: 'mshepcutt2h@examiner.com',
                },
                {
                    firstname:  'Julie',
                    lastname:  'Petrelli',
                    email: 'jpetrelli2i@mashable.com',
                },
                {
                    firstname:  'Dietrich',
                    lastname:  'Baumadier',
                    email: 'dbaumadier2j@archive.org',
                },
                {
                    firstname:  'Mallory',
                    lastname:  'Cleere',
                    email: 'mcleere2k@irs.gov',
                },
                {
                    firstname:  'Ginelle',
                    lastname:  'Gerding',
                    email: 'ggerding2l@google.ru',
                },
                {
                    firstname:  'Ganny',
                    lastname:  'MacGuffie',
                    email: 'gmacguffie2m@plala.or',
                },
                {
                    firstname:  'Elbert',
                    lastname:  'Coan',
                    email: 'ecoan2n@wisc.edu',
                },
                {
                    firstname:  'Rriocard',
                    lastname:  'Hawkridge',
                    email: 'rhawkridge2o@nasa.gov',
                },
                {
                    firstname:  'Drud',
                    lastname:  'Yitzowitz',
                    email: 'dyitzowitz2p@tinyurl.com',
                },
                {
                    firstname:  'Jimmy',
                    lastname:  'Slinger',
                    email: 'jslinger2q@mozilla.org',
                },
                {
                    firstname:  ',Rodrique',
                    lastname:  'Bagenal',
                    email: 'rbagenal2r@qq.com',
                }
            ],
            startIndex: 0,
            itemsPerPage: 10,
        }
    },
    methods: {
        onNextPage(){
            this.startIndex++;
        },
        
        onPreviousPage(){
            this.startIndex--;
        },
    }
}
</script>