Arrays

In addition to single objects, web components can accept object arrays.

In the example below, my-component has an object array property called items. The component's template iterates over the array showing an item's name property in a label and then puts its price into an input text box using the observable binding wr-value. Any changes to an item's price value will be reflected in the source array set into the component's items property.

class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      items: true
    }
  }
  static get templateUrl() {
    return './my-component.html';
  }
      
}

<!-- my-component.html -->
<ul>
  <li wr-each-item="items">
    <label><{item.name}<label><input wr-value="item.price">
  </li>
<ul>

Array Interpolation References

In addition to iterating over an array of objects, an individual object can be referenced directly in a template using the index number of the object in the array.

In the example below, the value of the name property on the first item (0 index) in the items array is put into the div element.

<!-- my-component.html -->
<div>{items[0].name}</div>

This can also be used with an observable attribute binding to update the property on the source array of objects.

<!-- my-component.html -->
<input wr-value="items[0].name">