v-for का उपयोग
v-for एक list, एक object, या एक range में हर item के लिए एक element को repeat करता है।
In this page:
Syntax
<li v-for="item in items" :key="item.id">{{ item }}</li>
<li v-for="(item, index) in items" :key="index">{{ index }}: {{ item }}</li>v-for
Arrays पर loop करने के लिए v-for="item in items" लिखें, position के लिए (item, index) इस्तेमाल करें, और object properties के लिए (value, key)। एक number 1 से शुरू होते हुए उतनी बार loop करता है। हमेशा एक key add करें ताकि list बदलने पर Vue items track कर सके।
Note:
जब items reorder हो सकें key की तरह index की बजाय एक unique id इस्तेमाल करें।
उदाहरण: v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(fruit, i) in fruits" :key="fruit">{{ i + 1 }}. {{ fruit }}</li>
</ul>
<p v-for="(v, k) in person" :key="k">{{ k }} = {{ v }}</p>
<span v-for="n in 3" :key="n">[{{ n }}]</span>
</div>
<script>
Vue.createApp({
data() { return { fruits: ["apple", "banana", "cherry"], person: { name: "Ada", role: "engineer" } }; },
}).mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: 1. apple2. banana3. cherryname = Adarole = engineer[1][2][3]
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- key attribute missing होना
- reorderable lists के लिए key की तरह array index इस्तेमाल करना
- ऐसे तरीकों से arrays mutate करना जिन्हें Vue detect नहीं कर सकता
चैप्टर सारांश
- item in items arrays पर loop करता है
- (item, index) position देता है
- Objects value, key देते हैं
- हमेशा एक key provide करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: