Update Pagination.vue

Author: dhi2

Pagination.vue

@@ -2,42 +2,26 @@
     <div class="container">
         <div class="row w-100 m-0">
             <div class="col col-12 d-block text-center p-0 py-5 pagination">
-                <template v-if="pagination_data.current_page === 1">
-                    <span class="prev page-numbers disabled" aria-disabled="true"><i class="fa fa-caret-left"></i></span>
-                </template>
-                <template v-else>
-                    <a class="prev page-numbers" v-on:click.prevent="goto(pagination_data.current_page - 1)"><i class="fa fa-caret-left"></i></a>
-                </template>
+                <span v-if="pagination_data.current_page === 1" class="prev page-numbers disabled" aria-disabled="true"><i class="fa fa-caret-left"></i></span>
+                <a v-else class="prev page-numbers" v-on:click.prevent="goto(pagination_data.current_page - 1)"><i class="fa fa-caret-left"></i></a>
 
                 <template v-for="n in pagination_data.last_page">
-                    <template v-if="pagination_data.current_page === n">
-                        <a class="page-numbers current" v-html="n"></a>
-                    </template>
+                    <a v-if="pagination_data.current_page === n" class="page-numbers current" v-html="n"></a>
                     <template v-else>
-                        <template v-if="((
-                                        (n < (pagination_data.current_page + 3) && n <= 6 && (pagination_data.current_page <= 4)) || (n > (pagination_data.last_page - 1))
-                                        ) || (
-                                        (n > (pagination_data.current_page - 3) && n > (pagination_data.last_page - 6) && (pagination_data.current_page > (pagination_data.last_page - 4))) || (n === 1)
-                                        )) || (
-                                            (n > (pagination_data.current_page - 3)) && n < (pagination_data.current_page + 3)
-                                        )
-                                        ">
-                            <a class="page-numbers" v-on:click.prevent="goto(n)" v-html="n"></a>
-                        </template>
-                        <template v-else>
-                            <template v-if="(n === (pagination_data.current_page - 3)) || n === (pagination_data.current_page + 3)">
-                                <span class="page-numbers dots">…</span>
-                            </template>
-                        </template>
+                        <a v-if="((
+                            (n < (pagination_data.current_page + 3) && n <= 6 && (pagination_data.current_page <= 4)) || (n > (pagination_data.last_page - 1))
+                            ) || (
+                            (n > (pagination_data.current_page - 3) && n > (pagination_data.last_page - 6) && (pagination_data.current_page > (pagination_data.last_page - 4))) || (n === 1)
+                            )) || (
+                                (n > (pagination_data.current_page - 3)) && n < (pagination_data.current_page + 3)
+                            )
+                            " class="page-numbers" v-on:click.prevent="goto(n)" v-html="n"></a>
+                        <span v-else-if="(n === (pagination_data.current_page - 3)) || n === (pagination_data.current_page + 3)" class="page-numbers dots">…</span>
                     </template>
                 </template>
 
-                <template v-if="pagination_data.current_page < pagination_data.last_page">
-                    <a class="next page-numbers" v-on:click.prevent="goto(pagination_data.current_page + 1)"><i class="fa fa-caret-right"></i></a>
-                </template>
-                <template v-else>
-                    <span class="next page-numbers disabled" aria-disabled="true"><i class="fa fa-caret-right"></i></span>
-                </template>
+                <a v-if="pagination_data.current_page < pagination_data.last_page" class="next page-numbers" v-on:click.prevent="goto(pagination_data.current_page + 1)"><i class="fa fa-caret-right"></i></a>
+                <span v-else class="next page-numbers disabled" aria-disabled="true"><i class="fa fa-caret-right"></i></span>
             </div>
         </div>
     </div>
@@ -52,10 +36,12 @@
         ],
         watch: {
             pagination_data: function(){
-                if(typeof this.pagination_data.current_page === 'number'){
-                    this.$emit('update:pagination_goto', this.pagination_data.current_page);
+                const t = this;
+
+                if(typeof t.pagination_data.current_page === 'number'){
+                    t.$emit('update:pagination_goto', t.pagination_data.current_page);
                 } else {
-                    this.$emit('update:pagination_goto', false);
+                    t.$emit('update:pagination_goto', false);
                 }
             }
         },