I'm looking to accomplish the following: if a user selects input X (a number between 1 and 10), I want to render a specific vue component X times. It seems to work if I use v-for n in 10, but not when I use variables.
<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>
Any quick ideas on how to solve this? Currently, I am returning some string temporarily (it should actually be a component, but I can replace the string with the component later), which works if I replace "selected" with a number like 5 (then it renders 5 times).
Also, just as a side note: when I replace "hey" with n, it displays the correct number. However, it shows the number itself, not the number of times (i.e., it displays 1 2 3 ... but only once).