整数范围绑定到组件属性的 Vue `v-for` 指令？

Question

我正在试验 Vue.js（版本 2.5.16）及其 v-for 指令，它应该能够根据某个整数重复元素范围，根据official Vue.js documentation。具体来说，我正在尝试编写一个组件，该组件根据整数值属性.

绘制多个循环计数器

以下包含硬编码文字值 10 的代码片段确实准确地呈现了十个圆圈：(jsfiddle)

    <svg class="counter" v-for="n in 10" :key="n"
         xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 10 10">
        <circle cx="5" cy="5" r="5"></circle>
    </svg>

但是，硬编码该值的实用性有限。我在我的组件中添加了一个整数值属性，如下所示：(typescript)

export default Vue.extend({
    props: {
        counter: Number
    },
    ...

... 并尝试了 v-for 指令的以下变体：

v-for="n in counter" :key="n" (jsfiddle)
v-for="n in {counter}" :key="n" (jsfiddle)

但是它们都没有实现可变数量的渲染圆圈。（注意：我使用了 Vue 开发人员工具来确保组件的 counter 属性实际上保持正确的值。）

这让我想到了我的问题：如何将 v-for 与组件的属性设置的整数范围一起使用？

如果这不可能，那么 v-for 的整数范围支持确实是相当无用的。人们希望多久使用一次硬编码范围？

但是，我仍然想要这种行为。如果没有 v-for，如何实现它？我可以想到几种可能的选择：

写我自己的渲染函数。
在 中使用 counter 属性计算 属性 returns 所需大小的数组并使用 v-for 在那个数组上。
将 v-for 绑定到数组并挂钩 counter 属性的更改以仅使用 array change detection page 上列出的数组突变来更新该内部数组，因此Vue 不会在每次更改时丢弃并重建整个 DOM 子结构。

对于这样一个简单的用例，选项 1 似乎需要大量工作。选项 2 非常简单，但我担心它会导致 Vue 丢弃并重新生成 all 重复的每次更改的子元素。如果可能的话，选项 3 似乎会表现最好，但我真的不知道该怎么做。（正如我所说，我是第一次研究 Vue。）

怎么办？

Answer 1

如 v-for docs 中所述，您可以直接将 v-for 与数值范围一起使用：

v-for can also take an integer. In this case it will repeat the template that many times.

因此您可以只使用 v-for="n in counter"，如下例所示：

new Vue({
  el: '#app',
  data() {
    return {
      counter: 10
    }
  }
});

.counter {
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>

<div id="app">
  <div>
    <h3>Select number of circles</h3>
    <input type="number" v-model.number="counter" />
  </div>
  <svg class="counter" v-for="n in counter" :key="n" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10">
      <circle cx="5" cy="5" r="5"></circle>
  </svg>
</div>

Answer 2

您只需将值绑定到您的 counter property.Let 假设您的组件名为 circ。

<div id="app">
  <circ :counter="10"></circ>
</div>

<template id="circ">
  <div>
    <svg class="counter" v-for="n in counter" :key="n"
         xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 10 10">
         <circle cx="5" cy="5" r="5"></circle>
    </svg>
  </div>
</template>

演示：http://jsbin.com/vebijiyini/edit?html,js,output

Answer 3

看到你的 fiddle ，你正在传递名为 value 的道具作为

<counter-component value="14" />

您没有使用 v-bind 或 : (shorthand)

动态绑定 value 道具

所以您作为 value 传递的数字 14 被评估为字符串

因此绑定道具将其视为数字

 counter-component v-bind:value="14" />

或者

counter-component :value="14" />

这是你的updated fiddle

整数范围绑定到组件属性的 Vue `v-for` 指令？

Vue `v-for` directive with integer range bound to component property?

vue.js

vuejs2

v-for

整数范围绑定到组件 属性 的 Vue `v-for` 指令？

Vue `v-for` directive with integer range bound to component property?

vue.js

vuejs2

v-for

整数范围绑定到组件属性的 Vue `v-for` 指令？