categories changed

components/ProductsRelated.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="cards-grid">
-    <div v-for="product in products" :key="product.id">
-      <ProductCard :key="product.key" :product="product" />
+    <div v-for="(product, key) in products" :key="product.id">
+      <ProductCard :key="key" :product="product" />
     </div>
     <div class="c-pagination">
       <BPagination 
         v-model="currentPage"
-        :v-if="products"
+        :v-if="relatedProducts"
         :total-rows="rows"
         :per-page="perPage"
       />
@@ -29,11 +29,14 @@ export default {
   data() {
     return {
       currentPage: 1,
-      perPage: this.productsPerPage,
-      rows: this.relatedProducts.length,
+      perPage: this.productsPerPage ? this.productsPerPage : 8,
+      //rows: this.relatedProducts ? this.relatedProducts.length : 0,
     }
   },
   computed: {
+    rows() {
+      return Array.isArray(this.relatedProducts) ? this.relatedProducts.length : 0
+    },
     products() {
       const initial = (this.currentPage - 1) * this.perPage
       const final = this.currentPage * this.perPage