Vue.js - 重復一個元素特定的次數

Question

我想使用 Vue.js 根據num-labels屬性重復一個元素 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

v-for也可以取整數。 在這種情況下，它將多次重復模板。

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

並且您將需要使用v-bind:num-labels="4"將值解析為number 。

Vue 文檔

Answer 2

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

見 道具驗證

Answer 3

正如某些人所注意到的，這是因為您將 4 作為字符串而不是整數傳遞

這應該工作

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

這是文檔參考Components Literal-vs-Dynamic