Vue.js में पृष्ठ पर अंक लगाना

नमस्कार, हेब्र! मैं आपको डेनी हेड्रिक के लेख " पेजेशन इन वीयू.जेएस " का अनुवाद प्रस्तुत करता हूं।

पेजिनेशन उपयोगकर्ताओं को छोटे ब्लॉकों या पृष्ठों पर डेटा की कल्पना करने की अनुमति देकर UX को बढ़ाता है। तो Vue.js घटक को पृष्ठांकित किया जा सकता है, जो हमें एक बार में हमारे डेटा का केवल एक हिस्सा देखने की अनुमति देगा।



सबसे पहले, मैं अपने जावास्क्रिप्ट ऑब्जेक्ट में टुकड़ा जोड़ दूंगा। और फिर मैं टेम्पलेट दिखाऊंगा

सभी स्थानीय डेटा में से, मुझे केवल डेटा - पृष्ठ संख्या की आवश्यकता है।

data(){ return { pageNumber: 0 //   0 } } 

प्रॉप्स (प्रॉपर्टीज) के लिए, डेटा ट्रांसफर अनिवार्य है, लेकिन मैं अधिकतम संख्या में रिकॉर्ड्स के लिए आकार तर्क भी लूंगा।

 props:{ listData:{ type:Array, required:true }, size:{ type:Number, required:false, default: 10 } } 

मेरे कार्यान्वयन के लिए, मैं पिछले (पिछले) और अगले (अगले) पृष्ठों पर जाने के तरीकों का उपयोग करूंगा:

 methods:{ nextPage(){ this.pageNumber++; }, prevPage(){ this.pageNumber--; } } 

एक त्वरित गणना की गई संपत्ति यह पता लगाने के लिए कि कितने पृष्ठ हैं:

 pageCount(){ let l = this.listData.length, s = this.size; //     return Math.ceil(l/s); //  // return Math.floor(l/s); } 

अब, गणना की गई पगडंटिडेटा संपत्ति वह जगह है जहां सब कुछ संयुक्त है। यह फ़िल्टर किया गया डेटा है जिसे प्रदर्शित किया जाएगा।

 paginatedData(){ const start = this.pageNumber * this.size, end = start + this.size; return this.listData.slice(start, end); } 

संपादकीय : मैंने शुरू में एक सरणी की नकल करने के लिए कुछ भयानक और बोझिल किया था। .Slice का उपयोग करना सबसे अच्छा तरीका है। धन्यवाद, अलेक्जेंडर कारेलस ।

और हमारा टेम्पलेट

 <div> <ul> <li v-for="p in paginatedData"> {{p.first}} {{p.last}} {{p.suffix}} </li> </ul> <button @click="prevPage"> Previous </button> <button @click="nextPage"> Next </button> </div> 

मैं चाहता हूं कि बटन तब काम करें जब उन्हें केवल करना हो। प्रबल बटन के लिए , मैं जोड़ूंगा :

: अक्षम = "पेजनंबर == 0"

और अगले पेज बटन के लिए मैं जोड़ूंगा :

: अक्षम = "पेजनंबर> = पेजकाउंट -1"

मेरे घटक का कार्यशील डेमो:


कभी-कभी स्थिति को कम करना मुश्किल होता है, लेकिन पृष्ठांकन एक सरल कार्य है जिसे हम अपने उपयोगकर्ताओं को बिना अधिक प्रयास के कर सकते हैं।

पढ़ने के लिए धन्यवाद!

डेनी हेड्रिक एक यूएसएफ़ वेब डेवलपर है जो अपनी नौकरी से बहुत प्यार करता है। विभिन्न प्लेटफार्मों और Vue.js पर विकसित करने के अलावा, जब वह कर सकता है, तो वह कभी-कभी ब्लॉग पसंद करता है। आप ट्विटर पर @dennythecoder पर उसका अनुसरण कर सकते हैं।