Vue: v-for range starting point

[metekabak]

Hi, i would like to suggest a system for range loop.

We can register a range loop like,
n in 10

but we can't set the starting point. can we just have something like ? or what is the best way to do it in vue.js ?
n in 2..23

[yyx990803]

You can either just compute by doing n + 2, or create your own range function and do n in range(2, 23). I don't think we should introduce more non-javascript syntax into v-for.

[muzanella11]

Hi, How I can looping this case with your v-for like this in vue.js

$i=5; $i < 10; $i++

[PavloBosoi]

range: function(min,max){
var array = [],
j = 0;
for(var i = min; i <= max; i++){
array[j] = i;
j++;
}
return array;
}

[t404]

@metekabak
Hello, you can use
v-for="i in (3, 8)"

[Martiveen]

@tupengtongxue since what version does that work? For me it does not and I am on version 2.3.3

[khanhtdbse]

@metekabak
You can use lodash util
_.range([start=0], end, [step=1])

[metekabak]

I've been using lodash for that already I just suggested a new syntax. Thanks anyway

[pritam1605]

How to start the range in v-for from 0 instead of 1??

[VSG24]

@yyx990803 I disagree. This is such a common case and I think there should be a built in way of doing it without the need of a custom range function.

[eskildsen]

I totally agree with you @VSG24.

In the meantime. As this issue ranks quite well on Google, I will provide my way of starting on index 0 in a ranged v-for. We can just use the index instead of the value:

<span v-for="(value, index) in 4">{{ index }}</span>

[KokoDoko]

How can I make the end value a variable?
<span v-for="(value, index) in numPages">This doesn't work</span>

[maxi-jp]

@KokoDoko you can use variables of any kind. I have tested it by making numPages a property of the component (in the data() object), a prop or even a computed property:

<item v-for="n in currentNumberOfItems">{{n}} item</item>
would work if currentNumberOfItems is define by one of these cases:

data () {
    return {
        currentNumberOfItems: 4
    };
},

props: {
    currentNumberOfItems: { default: 4 }
},

computed: {
    currentNumberOfItems () {
        // do a very complicated stuff to compute your return value
        return 4;
    }
},

[A1Gard]

This good answer: https://stackoverflow.com/questions/49715339/how-to-render-v-for-from-particular-index/49715374#49715374

[thinsoldier]

@maxi-jp

<item v-for="n in currentNumberOfItems">{{n}} item</item>

This renders the expected number of dom elements but when I change the value of currentNumberOfItems the number of dom elements drops to only one.

Demo: https://jsfiddle.net/eywraw8t/237408/

[maxi-jp]

@thinsoldier
That's because after editing count_loans (being the v-model of the input) the new value is a string with the number, not the number itself.
You can easly deal with this using, for example, a computed property that transforms the value again to an integer: https://jsfiddle.net/rhvj5eq3/

[thinsoldier]

<tr v-for="n in parseInt(count_loans)">

seems to work

[hbokmann]

Try adding v-if, though it's not the cleanest method. For cleaner way, define range in your component.

<span v-for="n in 23" v-if="n >= 2">{{ n }}</span>

[y-nk]

it shouldn't be a component's concern since it's a template function... it seems misplaced to be in methods. is there a way to make it happen as a template helper plugin of some sort ?

[Zeal29]

bur what about if we want our loop to be reverse
<span v-for="n in (10 to 0)" > {{ n }}</span> ......????? HELP PLEASE

[AnSungWook]

I solved it this way.
<a v-for="n in object.pageEnd" v-if="n >= object.pageStart" class="page" :class="{active : n == object.pageNo}" @click="fn_gopage(n)">{{n}}</a>

[y-nk]

@AnSungWook https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for

[shanegibney]

A drop down menu showing years in the range 2003 to 2019 can be done like this,

<select v-model="Yeartag" multiple class="form-control">
        <option v-for="i in 17" v-bind:value=(i+2002)>{{i+2002}}</option>
</select>

[philippzentner]

v-for="amount in [25, 50, 100, 200]"
Works. Just use an array instead of ()

[chiragobhan]

<Games v-for="item in upcomingGames.slice(1, 10)"></Games>
slice() works for me!