Question

我想根据num-labels道具使用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

v-for也可以取整数。在这种情况下，它会多次重复模板。

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

您需要使用v-bind:num-labels="4"将值解析为number。

Vue Docs

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

请参阅Prop Validation

Answer 3

正如有些人注意到的那样，这是因为你将4作为字符串传递而不是整数

这应该有效

query

这是文档参考 Components Literal-vs-Dynamic

Vue.js - 重复一个元素特定次数

3 个答案: