Using Dynamic Attributes

The most common use case is inside a vdl-repeat or vdl-repeat-contents loop where the value or index of the loop iteration is needed to populate an attribute in a VDL or HTML element.

<div vdl-repeat="=s,i in scenarios"
     vdl-attr="={id: 'scenarioId'+s.id}">
</div>

This example results in each div in the repeat loop gaining an id attribute based on combining the string scenarioId with the id of each scenario referenced in the loop, which is all scenarios on the shelf.

A slightly different syntax exists for those occasions when you can provide the value of vdl-attr as a string.

<vdl-row vdl-repeat-contents="=num, idx in ['a','b','c']">
    <vdl-column vdl-attr="size: idx+1">
        ...
    </vdl-column>
</vdl-row>

This works in the same way but is slightly more concise.