0

I want to declare dynamic lists in the html tags of my riot component, but can't figure out what am I doing wrong. Found this syntax for the array in another question, but in a different context. So here's what I've been trying:

<c-artworkdisplay
     extras= '[
         { "extra_name": "Featured on xy","extra_source": "xy.com" },
         { "extra_name": "Featured on zw","extra_source": "zw.com" }
     ]'>
</c-artworkdisplay>

The .tag itself should be fine as I could manage this to work when the array was declared in the mount script (I need the list to be unique for each tag, so that's not an option).

Lorant
  • 15
  • 5

1 Answers1

0

Convert your tag from

<c-artworkdisplay
     extras= '[
         { "extra_name": "Featured on xy","extra_source": "xy.com" },
         { "extra_name": "Featured on zw","extra_source": "zw.com" }
     ]'>
</c-artworkdisplay>

to

<c-artworkdisplay extras='{extras}'></c-artworkdisplay>

The extras will be our list which will be updated dynamically.

and define your list extras before mounting tag.

this.extras = [
  { 
    extra_name: 'Featured on xy',
    extra_source: 'xy.com' 
  },
  { 
    extra_name: 'Featured on zw',
    extra_source: 'zw.com' 
  }
];

riot.mount('c-artworkdisplay');

The tag will start reading content from the defined extras variable. After changing the content of extras don't forget to call riot.update() function.

 this.extras.push({
    extra_name: 'Test',
    extra_source: 'test.com' 
});

riot.update();

In the link, you can see illustrated example for your situation.

https://codepen.io/alihuseyn/pen/dmaRab

Alihuseyn
  • 148
  • 1
  • 9