Vue.js - повторять элемент определенное количество раз

Question

Я хотел бы использовать Vue.js для повторения элемента n раз, на основе num-labels.

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

Передает 4 как строка, которая не будет работать с v-for.

Передайте свой аргумент :, чтобы оценить выражение, чтобы получить фактическое число, которое будет работать с 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 
     } 
    } 
} 

См Prop Validation

Answer 2

v-for также может принимать целое число. В этом случае он будет повторять шаблон много раз.

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

и вам нужно будет использовать v-bind:num-labels="4" разобрать значение в number.

Vue Docs

Answer 3

Как некоторые люди замечают, это происходит потому, что вы передаете 4, как строка не целое

Это должно работать

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

И это ссылка на документы Components Literal-vs-Dynamic