title: Mutating array within an array (Polymer iron-list)
body: <p>I currently have an iron-list within another iron-list. The parent's data comes from a firebase-query element, and the child's data is computed from each parent item. The db structure and code looks a bit like this:</p>
  
  <pre><code>DB: [
       category1: [
                   itemId1: {
                             price: 10,
                             title: "title" 
                            }
                  ]
      ]
  
  
  
  &lt;iron-list id="categoryList" items="{{categories}}" multi-selection as="category"&gt;
          &lt;template&gt;
              &lt;div class="category-holder"&gt;
                  &lt;iron-list id="{{category.$key}}" items="{{_removeExtraIndex(category)}}" as="item" selection-enabled multi-selection selected-items="{{selectedItems}}" grid&gt;
                      &lt;template&gt;
                          &lt;div class$="{{_computeItemClass(selected)}}"&gt;
                              &lt;p&gt;[[item.title]]&lt;/p&gt;
                              &lt;p&gt;[[item.price]]&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/template&gt;
                  &lt;/iron-list&gt;
              &lt;/div&gt;
          &lt;/template&gt;
      &lt;/iron-list&gt;
  </code></pre>
  
  <p>After selecting any number of items, the user can tap on a fab to batch edit the price. This is where I'm having issues. I can't figure out how to access the correct child iron-list in order to call list.set...I'm currently trying the following very nasty method:</p>
  
  <pre><code>var categories = this.$.categoryList;
  var categoryItems = categories.items;
  
  (this.selectedItems).forEach(function(item) {
      var index = item.itemId;
      categoryItems.forEach(function(itemList, categoryIndex) {
      if (itemList[index]) {
           categories.set('item.' + categoryIndex + '.price', 10);
           }
      }, this);
  }, this);
  </code></pre>
  
  <p>I'm iterating over the selected items in order to extract the item index and then iterating over the parent iron-list data (categoryItems) in order to check if the given item exists in that subset of data. If so, then I use the category index and attempt to call set on the parent iron-list using the given path to access the actual item I want to edit. As expected, this fails. Hopefully I've made myself clear enough, any help would be appreciated!</p>
  
  <p><strong>EDIT #1:</strong></p>
  
  <p>After much experimenting, I finally figured out how to correctly mutate the child iron-list:</p>
  
  <pre><code>(this.selectedItems).forEach(function(item) {
                  var list = this.$.categoryList.querySelector('#' + item.category);
                  var index = list.items.indexOf(item);
                  list.set(["items", index, "price"], 30);                   
              }, this);
  </code></pre>
  
  <p>A couple of things worth noting. I'm using querySelector instead of the recommended this.$$(selector) because I keep running into a "function DNE" error. But now I have another problem...after calling the function, the value gets updated correctly but I get the following error:</p>
  
  <pre><code>Uncaught TypeError: inst.dispatchEvent is not a function
  </code></pre>
  
  <p>Here's a picture of the full error message:
  <a href="https://i.stack.imgur.com/QKNFI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QKNFI.png" alt="enter image description here"></a></p>
  
  <p>I see the light, hopefully someone can help me out!</p>