How to display specific range of number in Vue Js when making a loop?

user_3788939 0
Viewed 11120

How can I get specific number when I make a loop, in my case I want only to get 5 and above numbers or within a range that I want.

<select name="" id="input" class="form-control" v-model="selectcompetitionyear">
    <option v-for="n in 8" :value="n">Previous {{n}} games</option>
</select>

Result would be 

<select name="" id="input" class="form-control" v-model="selectcompetitionyear">
    <option value="5">Previous 5 games</option>
<option value="6">Previous 6 games</option>
<option value="7">Previous 7 games</option>
<option value="8">Previous 8 games</option>
</select>
vuejs2 vue.js frontend loops javascript
4 Answers

If you'd like to control the step, you could use the following:

<option v-for="n in getNumbers(5,25,5)" :value="n">{{ n }}</option>

methods: {
      getNumbers:function(start,stop,step = 1){
        return new Array(stop / step).fill(start).map((n,i)=>(i+1)*step);
      },
}

And the result would be: enter image description here

user_45821320

Easiest way is to use v-if inside the option loop:

<option v-for="n in 8" v-if="n >=5" :value="n">Previous {{n}} games</option>
user_11674050
Related