Vue Js-v-for X回ループ（範囲内）

ループを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はどこからオブジェクトのソースを知っていますか？ドキュメントのようにレンダリングすると、アイテム数とアイテム数が表示されますが、コンテンツは表示されません。

範囲内のインデックスを使用して、そのインデックスを介して配列にアクセスできます。

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

詳細については、公式ドキュメントを確認することもできます。

私はそのようなDov Benjaminの助けを借りてそれを解決しました：

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

そして別の方法、vue.jsのV1.xと2.xの両方

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

parseInt()v-forが数字を見ていたことを伝えるために追加する必要がありました。

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

ネイティブJSスライスメソッドを使用できます。

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

slice（）メソッドは、配列内の選択された要素を新しい配列オブジェクトとして返します。

移行ガイドのヒントに基づく：https : //vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

同じことが範囲内の v-forにも当てはまります。

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

2.2.0以降では、コンポーネントでv-forを使用するときに、キーが必要になります。

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

ソース