Vue 'v-for' 指令，整数范围绑定到组件属性?

Question

我正在试验Vue.js(版本 2.5.16)及其v-for指令，根据官方 Vue.js 文档，它应该能够根据某个整数范围重复元素。具体来说，我正在尝试编写一个组件，该组件基于整数值属性绘制许多循环计数器。

以下片段包含硬编码的文本值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>

但是，对值进行硬编码的效用有限。我向我的组件添加了一个整数值属性，如下所示：(打字稿)

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的情况下实现它？我可以想到几种可能的替代方案：

1. 编写我自己的渲染函数。
2. 在返回所需大小的数组的计算属性中使用counter属性，并在该数组上使用v-for。
3. 将v-for绑定到数组并钩接到counter属性的更改中，以仅使用数组更改检测页面上列出的数组突变来更新该内部数组，以便Vue不会在每次更改时丢弃和重建整个 DOM 子结构。

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

怎么办？

Answer 1

您只需将值绑定到counter属性即可。假设您的组件称为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 2

看到你的小提琴，你正在传递名为value的道具

<counter-component value="14" />

您没有使用v-bind或:(速记)动态绑定value道具

因此，您作为value传递的数字14被评估为字符串

所以绑定道具将其视为数字

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

或

counter-component :value="14" />

这是您更新的小提琴

Answer 3

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

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

所以你可以只使用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>