Vue Js - Vòng qua v-for X lần (trong một phạm vi)

Làm thế nào tôi có thể lặp lại một vòng lặp qua v-forX (ví dụ: 10) lần?

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

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

Tài liệu cho thấy:

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

nhưng từ đâu vue biết nguồn gốc của các đối tượng? Nếu tôi kết xuất nó như tài liệu nói, tôi nhận được số lượng các mục và các mục, nhưng không có nội dung.

Bạn có thể sử dụng một chỉ mục trong một phạm vi và sau đó truy cập vào mảng thông qua chỉ mục của nó:

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

Bạn cũng có thể kiểm tra Tài liệu chính thức để biết thêm thông tin.

Tôi đã giải quyết nó với sự giúp đỡ của Dov Benjamin như vậy:

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

Và một phương pháp khác, cho cả V1.x và 2.x của 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)
     }
  }

Tôi phải thêm parseInt()vào để nói với v-vì nó đang xem xét một số.

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

Bạn có thể sử dụng phương pháp lát JS gốc:

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

Phương thức slice () trả về các phần tử đã chọn trong một mảng, dưới dạng một đối tượng mảng mới.

Dựa trên mẹo trong hướng dẫn di chuyển: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

Tương tự đối với v-for trong phạm vi :

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

Trong 2.2.0+, khi sử dụng v-for với một thành phần, khóa bây giờ là bắt buộc .

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

Nguồn