CODEWITHSUNDEEP
javascriptlistvue.jsrendering
Coderz9
Coderz9

Reputation: 173

iterate v-for depending on selected input number

i want to achieve the following: if user selects input X (which is a number, lets say 1, 2, 3 ... 10) i want to render a specific other vue component also x times. it works if i go about it with saying v-for n in 10 but not if 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 idea? I just returned some string rn, (but it gotta be a component but well i can just replace the string with the component right,) which works if i replace selected with a number like e.g. 5 (then it renders 5 times)

also on a quick note stating the obvious: when i replace "hey" with n , it renders the correct number. (the number, not the number of times, it shows 1 2 3 ... but only once)

Upvotes: 3

Views: 216

Answers (1)

talkhabi
talkhabi

Reputation: 2759

Try to bind value as number like this :value="1"

Here is an example:

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>

Upvotes: 5

Related Questions