Loop :for

:for directive allows to repeat a tag based on a property.

The syntax is as follow: :for="item in state.items".

The item value will be available trough ${item} within the loop.

If you need an incremental index i, use :for="item, i in state.items".

Example #

<template>
  <li :for="attendee in state.attendees">${attendee}</li>
</template>

<script>
  export default class extends Lego {
    state = { attendees: ['John', 'Mary'] }
  }
</script>

Outputs:

<li>John</li><li>Mary</li>