EcommercePackageRoute.vue

<template>
  <div>
    <table class="ui striped celled table">
      <thead>
      <tr>
        <th>نام پکیج</th>
        <th class="right aligned">تاریخ ایجاد</th>
        <th class="center aligned">وضعیت</th>
        <th>فعال در قسمت</th>
        <th class="right aligned">عملیات</th>
      </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
      <tr>
        <th colspan="5">
          <pagination :promise-factory=promiseFactory :from=1 :current-page.sync=currentPage :to=10 :total=1500 :last-page=150 :per-page=10></pagination>
        </th>
      </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
  import Pagination from "./Pagination";

  export default {
    components: {Pagination},
    mounted() {
      this.$root.app.changeHtmlTitle('لیست پکیج‌ها');
    },
    data() {
      const vm = this;
      return {
        currentPage: 100,
        loading: false,
        promiseFactory(page) {
          return () => {
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                console.log("Page: page requested" + page.toString());
                // vm.currentPage = page;
                this.currentPage = page;
                resolve();
              }, 5000)
            });
          }
        }
      }
    }
  }
</script>

Pagination.vue

<template>
  <div v-if="hasPages">
    <div class="ui pagination menu" :class="{small: size === 'small', tiny: size === 'tiny', large: size === 'large', mini: size === 'mini', floated: floated}">
      <a class="icon item" :class="{'disabled': currentPage == 1}" @click="currentPageIsGonnaChange($event, currentPage - 1)">
        <i class="right chevron icon"></i>
      </a>

      <template v-if="slider.first !== null" v-for="page in slider.first">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a v-if="slider.second" @click="$event.preventDefault();" class="item disabled">...</a>

      <template v-if="slider.second !== null" v-for="page in slider.second">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a v-if="slider.last" @click="$event.preventDefault();" class="item disabled">...</a>

      <template v-if="slider.last !== null" v-for="page in slider.last">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a class="icon item" :class="{'disabled' : currentPage == lastPage}" @click="currentPageIsGonnaChange($event, currentPage + 1)">
        <i class="left chevron icon"></i>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      floated: {
        type: Boolean,
        default: true,
        required: false
      },
      size: {
        type: String,
        required: false,
        default: 'small'
      },
      total: {
        required: true
      },
      perPage: {
        required: true
      },
      currentPage: {
        required: false,
        default: 1,
        twoWay: true
      },
      lastPage: {
        required: true
      },
      from: {
        required: true
      },
      to: {
        required: true
      },
      promiseFactory: {
        type: Function,
        required: true
      }
    },

    methods: {
      getUrlRange(from, to) {
        const arr = [];

        while (from <= to) {
          arr.push(from);
          from++;
        }

        return arr;
      },

      currentPageIsGonnaChange($event, page) {
        $event.preventDefault();
        if (page != this.currentPage) {
          this.promiseFactory(page)();
        }
      }
    },

    computed: {
      hasPages() {
        return this.total > this.perPage;
      },

      slider() {
        if (this.lastPage < ((this.onEachSlide * 2) + 6)) {
          return {
            first: this.getUrlRange(this.currentPage, this.lastPage),
            second: null,
            last: null
          }
        }

        const win = this.onEachSlide * 2;

        if (!this.hasPages) {
          return {
            first: null,
            second: null,
            last: null
          }
        }

        if (this.currentPage <= win) {
          return {
            first: this.getUrlRange(1, win + 2),
            second: null,
            last: this.getUrlRange(this.lastPage -1, this.lastPage)
          }
        }

        if (this.currentPage > (this.lastPage - win)) {
          return {
            first: this.getUrlRange(1, 2),
            second: null,
            last: this.getUrlRange(this.lastPage - (win + 2), this.lastPage)
          }
        }

        return {
          first: this.getUrlRange(1, 2),
          second: this.getUrlRange(this.currentPage - this.onEachSlide, this.currentPage + this.onEachSlide),
          last: this.getUrlRange(this.lastPage - 1, this.lastPage)
        }
      }
    },

    data() {
      return {
        onEachSlide: 2
      }
    }
  }
</script>

vue mige: hich componenti hagh nadare variablei ke behesh pass dade shode ro mostaghim va ba operatore = taghir bede.
rahe hal? parent biad az .sync estefade kone va component har vakht khast meghdare un variable ro tuye parent taghir bede, evente update:variable ro emit kone.

to inja dari function promiseFactory ro pass midi be component. yani component un ro gharare ejrash kone. tebghe harfi ham ke bala goftam, in kar nemishe. chon component hagh nadare parent ro dastkari kone.

tuye khatte 85 Pagination ye taghiri midam dobare mizaram, check kon:

<template>
  <div v-if="hasPages">
    <div class="ui pagination menu" :class="{small: size === 'small', tiny: size === 'tiny', large: size === 'large', mini: size === 'mini', floated: floated}">
      <a class="icon item" :class="{'disabled': currentPage == 1}" @click="currentPageIsGonnaChange($event, currentPage - 1)">
        <i class="right chevron icon"></i>
      </a>

      <template v-if="slider.first !== null" v-for="page in slider.first">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a v-if="slider.second" @click="$event.preventDefault();" class="item disabled">...</a>

      <template v-if="slider.second !== null" v-for="page in slider.second">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a v-if="slider.last" @click="$event.preventDefault();" class="item disabled">...</a>

      <template v-if="slider.last !== null" v-for="page in slider.last">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a class="icon item" :class="{'disabled' : currentPage == lastPage}" @click="currentPageIsGonnaChange($event, currentPage + 1)">
        <i class="left chevron icon"></i>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      floated: {
        type: Boolean,
        default: true,
        required: false
      },
      size: {
        type: String,
        required: false,
        default: 'small'
      },
      total: {
        required: true
      },
      perPage: {
        required: true
      },
      currentPage: {
        required: false,
        default: 1,
        twoWay: true
      },
      lastPage: {
        required: true
      },
      from: {
        required: true
      },
      to: {
        required: true
      },
      promiseFactory: {
        type: Function,
        required: true
      }
    },
    methods: {
      getUrlRange(from, to) {
        const arr = [];
        while (from <= to) {
          arr.push(from);
          from++;
        }
        return arr;
      },
      currentPageIsGonnaChange($event, page) {
        $event.preventDefault();
        if (page != this.currentPage) {
          this.$emit('update:currentPage', page)
        }
      }
    },
    computed: {
      hasPages() {
        return this.total > this.perPage;
      },
      slider() {
        if (this.lastPage < ((this.onEachSlide * 2) + 6)) {
          return {
            first: this.getUrlRange(this.currentPage, this.lastPage),
            second: null,
            last: null
          }
        }
        const win = this.onEachSlide * 2;
        if (!this.hasPages) {
          return {
            first: null,
            second: null,
            last: null
          }
        }
        if (this.currentPage <= win) {
          return {
            first: this.getUrlRange(1, win + 2),
            second: null,
            last: this.getUrlRange(this.lastPage -1, this.lastPage)
          }
        }
        if (this.currentPage > (this.lastPage - win)) {
          return {
            first: this.getUrlRange(1, 2),
            second: null,
            last: this.getUrlRange(this.lastPage - (win + 2), this.lastPage)
          }
        }
        return {
          first: this.getUrlRange(1, 2),
          second: this.getUrlRange(this.currentPage - this.onEachSlide, this.currentPage + this.onEachSlide),
          last: this.getUrlRange(this.lastPage - 1, this.lastPage)
        }
      }
    },
    data() {
      return {
        onEachSlide: 2
      }
    }
  }
</script>