Vue.js - 特定の回数だけ要素を繰り返します

Question

num-labels propに基づいてVue.jsを使用して要素をn回繰り返したいとします。

<label-parent num-labels="4"></label-parent> 

これは私のコンポーネントです：

<template> 
    <div id="label-parent"> 
    <div v-for="idx in numLabels"> 
     {{idx}} 
    </div> 
    </div> 
</template> 

<script>; 
export default { 
    name: "LabelParent", 
    props: ['numLabels'], 
} 
</script> 

このコードは、唯一の空のdiv出力：<div id="label-parent"></div>を。これを行う正しい方法は何ですか？

Answer 1

<label-parent num-labels="4"></label-parent> 

v-forでは動作しません文字列として4を渡します。

引数を:で渡すと式が評価され、実際の数値はv-forとなります。

ところで

<label-parent :num-labels="4"></label-parent> 

：

私は非常にあなたの小道具を入力して示唆しています。

あなたはこのようなあなたの小道具を入力することができます。一部の人が気づくと

export default { 
    props: { 
     numLabels: { 
      type: Number, // type of the property 
      required: (true|false), // is this prop required or not? 
      default: 0 // default value for this prop 
     } 
    } 
} 

は、あなたがこれは動作するはず

を整数でない文字列として4を渡しているので、これは、Prop Validation

Answer 2

v-forも整数を取ることができます。この場合、テンプレートは何度も繰り返されます。

<div v-for="n in 4">{{n}}</div> 

、あなたがnumberとして値を解析するためにv-bind:num-labels="4"を使用する必要があります。

Vue Docs

Answer 3

を参照してください。

<label-parent :num-labels="4"></label-parent> 

これはドキュメント参照です Components Literal-vs-Dynamic