Nova · Actions

List

push adds to the end of a list and removeAt takes out the element at a position. The loop over the list follows.

The action, as it is written

{
  id: 'list',
  data: { guests: ['Ada', 'Grace'] },
  layout: {
    component: 'Stack',
    children: [
      {
        for: '$.guests',
        as: 'guest',
        do: { component: 'Text', children: '$guest' },
      },
      {
        component: 'Button',
        ref: 'add',
        children: 'Add Linus',
      },
      {
        component: 'Button',
        ref: 'first',
        children: 'Remove the first',
      },
    ],
  },
  triggers: [
    {
      event: 'ui:click',
      ref: 'add',
      do: [{ push: 'guests', value: 'Linus' }],
    },
    {
      event: 'ui:click',
      ref: 'first',
      do: [{ removeAt: 'guests', index: 0 }],
    },
  ],
}

Running herepress it

Ada

Grace

What is done to it

press add
press first

What it then holds

{ guests: ['Grace', 'Linus'] }

What it then says

Grace
Linus
Add Linus
Remove the first

Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.