ฉันจะวนซ้ำผ่านv-forX (เช่น 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>
แต่ vue รู้แหล่งที่มาของวัตถุมาจากไหน? ถ้าฉันแสดงผลเหมือนที่เอกสารบอกฉันจะได้รับจำนวนรายการและรายการ แต่ไม่มีเนื้อหา
v-for; เมื่อถูกเรียกเทียบกับจำนวนเต็มและเมื่อถูกเรียกเทียบกับอาร์เรย์ การผสมโหมดเหล่านั้นและพยายามใช้จำนวนเต็มเพื่อควบคุมการเข้าถึงเนื้อหาของอาร์เรย์มีแนวโน้มที่จะทำให้เกิดปัญหา หากคุณต้องการส่วนย่อยของอาร์เรย์คุณสามารถกรองได้
คำตอบ:
คุณสามารถใช้ดัชนีในช่วงแล้วเข้าถึงอาร์เรย์ผ่านดัชนี:
<ul>
<li v-for="index in 10" :key="index">
{{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
</li>
</ul>
คุณสามารถตรวจสอบเอกสารอย่างเป็นทางการสำหรับข้อมูลเพิ่มเติม
<span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5. ใช้<span v-for="(e, i) in 5">{{i}} </span>เพื่อรับ 0-indexing
ฉันได้แก้ไขด้วยความช่วยเหลือของ Dov Benjamin เช่นนั้น:
<ul>
<li v-for="(n,index) in 2">{{ object.price }}</li>
</ul>
และอีกวิธีหนึ่งสำหรับทั้ง V1.x และ 2.x ของ 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)
}
}
คุณสามารถใช้วิธีการฝาน JS ดั้งเดิม:
<div v-for="item in shoppingItems.slice(0,10)">
slice () วิธีการคืนค่าองค์ประกอบที่เลือกในอาร์เรย์เป็นวัตถุอาร์เรย์ใหม่
ตามคำแนะนำในคู่มือการย้ายข้อมูล: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter
ฉันต้องเพิ่มparseInt()เพื่อบอก v-for มันกำลังดูตัวเลขอยู่
<li v-for="n in parseInt(count)" :key="n">{{n}}</li>
เช่นเดียวกันกับ v-for in range :
<li v-for="n in 20 " :key="n">{{n}}</li>
ใน 2.2.0+ เมื่อใช้ V-กับองค์ประกอบที่สำคัญคือตอนนี้จำเป็นต้องใช้
<div v-for="item in items" :key="item.id">