هل توجد طريقة لربط vuetify pagination مع firebase realtime

الأسئلة والاستفسارات
#1

file.vue

<template>
   <v-btn color="primary" @click="loadMore">
      load more
   </v-btn></div>
</template>

<script>
export default {
  methods: {
    loadMore() {
      this.$store.dispatch('getAllProducts', {
        limit: this.products.length + 8
      })
    }
  },
  created() {
    this.$store.dispatch('getAllProducts', {
      limit: 8
    })
  }

actions.js

getAllProducts({commit},payload){
      return new Promise((resolve, reject) => {
        return api.get(`product.json?orderBy="$key"&limitToLast=${payload.limit}`)
        .then(res => res.data)
          .then(res => {

            const products = []
            for (let key in res) {
              if (res.hasOwnProperty(key)) {
                products.push({
                  ...res[key],
                  id: key
                })
              }
            }
            commit('getAllProducts',products.reverse())
            resolve(res)
            console.log(res)
          })
        .catch(err => {
          reject(err)
          console.log(err)
        })
      })
    },

استعملت هذي الطريقة سابقا لتحميل المزيد من النتائج.

ابحث الان عن طريقة ربط pagination الخاصة بـ vuetify مع firebase realtime
استعملت عدة طرق لكن لم تعمل, رجعت الان للبداية :

<template>
<div class="text-center">
  <v-pagination
    v-model="pagination.page"
    :length="pagination.total / 8"
    :total-visible="pagination.visible"
  ></v-pagination>
</div>
</template>

<script>
export default {
  data() {
    return {
      pagination: {
        page: 1,
        total: 0,
        perPage: 0,
        visible: 7
      }
    }
  },
  created() {
    this.$store.dispatch('getAllProducts', {
      limit: 8
    })
    .then(res => {
      let products = []
        for (let key in res) {
          if (res.hasOwnProperty(key)) {
            products.push({
              ...res[key],
              id: key
            })
          }
        }
        this.pagination.total = products.length
    })
  }
}

هل من الممكن انها لا تعمل الا في firestore ؟

2 Likes
#2

أهلين فيك أحمد، ما بتوقع يكون السبب من firestore

جرب ان تعمل dispatch في mounted lifecycle وأن تستخدم async/await

async mounted() {
    const _products = await this.$store.dispatch('getAllProducts', {
      limit: 8
    }).then(res => res)

    let products = []
        for (let key in _products) {
          if (_products.hasOwnProperty(key)) {
            products.push({
              ..._products[key],
              id: key
            })
          }
     }

     this.pagination.total = products.length
  }
3 Likes
#3

حياك اخوي لؤي

طيب ماذا عن v-pagination في vuetify
في هذا المكون له 3 events اساسي (التالي - المدخل (عدد الصفحات) - السابق)

التالي و السابق نقدر نتحكم فيهم عبر startAt و endAt
التساؤل هنا كيف نربط عدد الصفحات(input) بـ limit معين من منتج ما على سبيل المثال

#4

عفوا عالتأخير بالرد أبو حميد

الـ input هو event بيشتغل عند عمل الـ pagination وليس له علاقة بعدد الصفحات، وعندما يعمل يقوم بتغيير رقم الـ page، لذلك هو كافي بالنسبة لنا

سننشئ fetchProducts method للحصول على المنتجات حسب رقم الصفحة، ستستفيد من رقم الصفحة في تحديد startAt في getAllProducts action

methods: {
    async fetchProducts() {
        const _products = await this.$store.dispatch('getAllProducts', {
            page: this.pagination.page,
            limit: 8
        }).then(res => res)

        let products = []
            for (let key in _products) {
                if (_products.hasOwnProperty(key)) {
                    products.push({
                        ..._products[key],
                        id: key
                })
            }
        }

        this.pagination.total = products.length
    }
}

سنقوم باستدعاء هذه الـ method عند الـ mount وعند الـ input

<v-pagination
    v-model="pagination.page"
    :length="pagination.total / 8"
    :total-visible="pagination.visible"
    @input="fetchProducts"
  ></v-pagination>

mounted() {
    this.fetchProducts();
}
2 Likes