Vue Js - एक्स-टाइम के माध्यम से (एक सीमा में) के माध्यम से लूप


108

मैं v-forएक्स (जैसे 10) बार के माध्यम से एक लूप कैसे दोहरा सकता हूं ?

// want to repeat this (e.g.) 10 times

<ul>
  <li v-for="item in shoppingItems">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

प्रलेखन से पता चलता है:

<ul>
  <li v-for="item in 10">{{ item }}</li>
</ul>

// or 

<li v-for="n in 10">{{ n }} </li>

// this doesn't work

<li v-for="item in 10">{{ item.price }}</li>

लेकिन कहां से कहां से वस्तुओं के स्रोत का पता चलता है? अगर मैं इसे रेंडर करता हूं जैसे कि डॉक्टर कहता है, मुझे आइटम और आइटम की संख्या मिलती है, लेकिन सामग्री के बिना।


दुर्भाग्य से यह काम नहीं करता है, लेकिन धन्यवाद
माइक

तुम सिर्फ खरीदारी itItems क्यों नहीं होगा?
बर्ट

1
हाय बर्ट - मैं केवल यह जानना चाहता हूं कि कैसे एक वी के लिए (सबसे सरल तरीका) (एक्स) दोहराव की संख्या और डॉक्टर में उदाहरण काम नहीं करता है .... शुद्ध जेएस में .... अजाक्स इसकी इतनी सरल वापसी <9 या या, लेकिन इस विधि में काम नहीं करते ...
मैककिन

दो अलग-अलग मोड हैं v-for; जब इसे किसी पूर्णांक के विरुद्ध कहा जाता है, और जब इसे किसी सरणी के विरुद्ध कहा जाता है। उन मोडों को मिलाने और एक सरणी की सामग्री तक पहुंच को नियंत्रित करने के लिए पूर्णांक का उपयोग करने की कोशिश करने से समस्याएं पैदा होने की संभावना है। यदि आपको सरणी के सबसेट की आवश्यकता है तो आप उसे फ़िल्टर कर सकते हैं।
जेसन एलेर

जवाबों:


172

आप किसी श्रेणी में एक सूचकांक का उपयोग कर सकते हैं और फिर इसके सूचकांक के माध्यम से सरणी तक पहुंच सकते हैं:

<ul>
  <li v-for="index in 10" :key="index">
    {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
  </li>
</ul>

अधिक जानकारी के लिए आप आधिकारिक दस्तावेज भी देख सकते हैं ।


3
यह काम करता है: :) मैंने इसे थोड़ा बदलकर <li v-for = "(n, index) के लिए 2"> {{ShoppingItems.price}} </ li> ==== MNY THXXXX कोडर ***** ! ====
मिककैन

कैसे उस 10 को एक चर बनाने के लिए?, घटक का डेटा बनाएं?
अल्वारो

6
यह 1-अनुक्रमित क्यों पूरी तरह से मेरे से परे है। <span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5<span v-for="(e, i) in 5">{{i}} </span>0-इंडेक्सिंग प्राप्त करने के लिए उपयोग करें ।
गोरगेल

मैंने देखा है कि आप पूरे सरणी पर पुनरावृति करने shoppingItems लिखना चाहिए [सूचकांक -1] .name
peschanko

25

मैंने इसे इस तरह से डो बेंजामिन की मदद से हल किया है:

<ul>
  <li v-for="(n,index) in 2">{{ object.price }}</li>
</ul>

और एक अन्य विधि, दोनों V1.x और 2. vue.js के लिए

Vue 1:

<p v-for="item in items | limitBy 10">{{ item }}</p>

Vue2:

// Via slice method in computed prop

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
   filteredItems: function () {
     return this.items.slice(0, 10)
     }
  }

14

मुझे parseInt()v बताने के लिए जोड़ना था क्योंकि यह एक संख्या को देख रहा था।

<li v-for="n in parseInt(count)" :key="n">{{n}}</li>


12

आप मूल जेएस स्लाइस विधि का उपयोग कर सकते हैं:

<div v-for="item in shoppingItems.slice(0,10)">

स्लाइस () विधि एक सरणी में चयनित तत्वों को एक नई सरणी वस्तु के रूप में वापस करती है।

माइग्रेशन गाइड में टिप के आधार पर: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter


धन्यवाद, सर्वश्रेष्ठ उत्तर
समाधान आत्मा


1

2.2.0+ में, जब एक घटक के साथ v- के लिए उपयोग किया जाता है, तो अब एक कुंजी की आवश्यकता होती है

<div v-for="item in items" :key="item.id">

स्रोत

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.