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/