How do I iterate through an inline var using pug

Question

I am attempting to iterate through an array and each time add 1 to the inline pug variable. So far this is what I got.

ul(class="benchcards")
            - var i = -1
            each card in cards
                -var L = i + 1
                li
                    a.btn(href="/addmonster" + L)
                        div=card.name
                        div= "Attack: "+card.attack
                        div= "HP: "+card.hp
                        div= "Attribute: "+card.attribute
                        div= "Energy: "+card.energy

When I run the page "L" is always = to 0. I want it to add 1 each time. The question really comes down to what am I doing wrong?

Answer 1

As said in the comments you are not incrementing the i , you can fix your issue like this:

ul.benchcards
  - var i = -1;
  each card in cards
    li
      a.btn(href='/addmonster' + i++)
        div= card.name
        div= 'Attack: ' + card.attack
        div= 'HP: ' + card.hp
        div= 'Attribute: ' + card.attribute
        div= 'Energy: ' + card.energy

Answer 2

It's better to use the index built into the each iterator in Pug . That way you don't have to declare or increment a variable.

ul.benchcards
  each card, i in cards
    li
      a.btn(href=`/addmonster${i}`)
        div #{card.name}
        div Attack: #{card.attack}
        div HP: #{card.hp}
        div Attribute: #{card.attribute}
        div Energy: #{card.energy}