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>

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>

• javascript
• loops
• vue.js
• frontend
• vuejs2

• In v-for are you looping through a fixed number or you have an array? – Vamsi Krishna Commented May 25, 2017 at 9:01
• I thought you can do a range like v-for="n in [5, 8]", but I figured out it now by using {{ n + 5 }}. Now it displays the numbers I needed. – PenAndPapers Commented May 25, 2017 at 9:05
• @PenAndPapers, please post it as an answer, for the benefit of others :) – Eliran Malka Commented May 25, 2017 at 9:06
• @PenAndPapers so is your problem solved? – Vamsi Krishna Commented May 25, 2017 at 9:06
• yes I solved it @user7814783 – PenAndPapers Commented May 25, 2017 at 9:07

4 Answers 4

It depends on use case, but one of methods would be:

var vm = new Vue({
el: '#app',
    data: {
        selectcompetitionyear:5
    },
    methods:{
        getNumbers:function(start,stop){
            return new Array(stop-start).fill(start).map((n,i)=>n+i);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app" class="l-container l-vPad--mid">
    <select name="" id="input" class="form-control" v-model="selectcompetitionyear">
    <option v-for="n in getNumbers(5,9)" :value="n">Previous {{n}} games</option>
</select>
</div>

My solution was just to add a number on the current loop value

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

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:

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>