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

Question

मैं 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>

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

Comments

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

— माइक

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

— बर्ट

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

— मैककिन

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

— जेसन एलेर

Answer 1

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

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

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

Comments

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

— मिककैन

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

— अल्वारो

यह 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

Answer 2

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

<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)
     }
  }

Answer 3

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

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

Answer 4

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

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

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

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

Comments

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

— समाधान आत्मा

Answer 5

वही वी-फॉर रेंज में जाता है :

<li v-for="n in 20 " :key="n">{{n}}</li>

Comments

कृपया पहले tdhulster उत्तर की जांच करें ।

— बेस्टहोस्ट

Answer 6

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

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

स्रोत