How to reload / refresh an iron-list in Polymer 1.0?

Question

I have added an item to my data property bound to an iron-list.

this.data.push(item); // add new item to array

Now the data item has been added but the list will not refresh / reload to show new item added to data array. How do you reload the iron-list? Also couldn't seem to find a method on the iron-list API page. I've tried the following but with no joy...

var list = this.querySelector("iron-list");
list.fire('refresh');
list._refresh();

My data property is defined as follows:

Polymer({
  is: "page-list",
  properties: {
    data: {
      type: Array,
      notify: true
    }

The template structure is:

<iron-ajax url="./data.json" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item" class="fit">
  <template>
    <div class="row">
      <p>[[item.name]]</p>
    </div>
  </template>
</iron-list>

Answer 1

You will need to use a Polymer function to add a new item, like this -

this.push('data', item);

Mutations to the items array itself (push, pop, splice, shift, unshift) must be performed using methods provided on Polymer elements, such that the changes are observable to any elements bound to the same array in the tree.

You can read more from here.