根据选定的输入数字迭代v-for

Question

我想实现以下目标：如果用户选择输入X（这是一个数字，可以说1、2、3 ... 10），我也想渲染特定的其他vue组件x次。如果我用10中的v-for n来解决这个问题，它会起作用，但是如果我使用变量，它就不会起作用。

    <template>
<div>
    <select v-model="selected" >
    <option disabled value="">Please select one</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    </select>

    <span v-for="n in selected" :key="n">{{"hey"}}</span>


</div>
</template>

<script>
export default {
  data: function () {
      return {
        selected: ''
      }
  },
}
</script>

有什么好主意吗？我刚刚返回了一些字符串rn，（但是它必须是一个组件，但是我可以将字符串替换为正确的组件），如果我将所选的字符串替换为例如5的数字（那么它将呈现5倍）

在简短的说明上也很明显：当我用n替换“ hey”时，它将呈现正确的数字。（数字而不是次数，它显示1 2 3 ...，但仅显示一次）

Answer 1

尝试value像这样绑定数字:value="1"

这是一个例子：

new Vue({
  el: "#app",
  data: {
    selected: 0
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" style="padding:20px">
  <select v-model="selected" >
    <option disabled :value="0">Please select one</option>
    <option :value="1">1</option>
    <option :value="2">2</option>
    <option :value="3">3</option>
  </select>
  <ol>
    <li v-for="i in selected">{{ 'hey' }}</li>
  </ol>
</div>