Alpine: Iterating over a range has to be a Number literal

[mokhosh]

I'm not sure if this is intended, but you can't iterate over a range using a variable that holds an integer:

x-for="i in 10" works
x-for="i in j" where j is 10 doesn't work

Here's a pen:
https://codepen.io/mokhosh/pen/mdPpvZR

[ryangjchandler]

@mokhosh I designed this feature that way just as a matter of simplicity - if enough people want to be able to use properties as the number of items, then I'll make a new PR with support for that, but 99% of the time, people have asked about the supported syntax.

[mokhosh]

I'm making a calendar with alpine. Now I'm doing this:

const daysInMonth = new Date(this.visibleYear, this.visibleMonth + 1, 0).getDate();
const dayOfWeek = new Date(this.visibleYear, this.visibleMonth).getDay();
this.blankDays = [1,2,3,4,5,6,7].slice(0,dayOfWeek);
this.daysOfMonth = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31].slice(0,daysInMonth);

But if I could use the i in j syntax I would do this instead:

this.blankDays = new Date(this.visibleYear, this.visibleMonth).getDay();
this.daysOfMonth = new Date(this.visibleYear, this.visibleMonth + 1, 0).getDate();

and still x-for over the properties.

[calebporzio]

Yeah, this kinda makes sense to me as well. If it's not too much extra code in the x-for logic, I'd be down to merge. If it's anything significant, I say skip it.

[zepfietje]

I also just ran into this. Expected it to work with variables too.

Hopefully this will be supported soon!

[ryangjchandler]

@calebporzio the amount of extra code is minimal - I'll send a PR in tomorrow.

[calebporzio]

Cool, thanks Ryan!

[mokhosh]

This is not released yet is it?

[ryangjchandler]

@mokhosh Not yet, the project has been a bit quiet for the last month or so but I know @calebporzio has been busy with Livewire stuff too.