title: computed binding on dom-repeat items property
body: <p>I'm building a relatively simple page in which are dynamically created a series of paper-tabs and core-pages. The idea is the user -through a paper-input- indicates the number of paper-tabs and core-pages that want and these are added automatically using dom-repeat's. The first part of this functionality is already implemented, but I have a problem with the second.</p>
  
  <p>Inside of the paper-pages I need 3 paper-inputs and buttons, so the user can create/delete new inputs. My idea is implement a function that will create many arrays as the user indicatedand fill them with the inputs.</p>
  
  <p>I have implemented a computed-binding to scroll through each of the Array's, but is not working. The X iron-pages are created without problems but no inputs are added.</p>
  
  <p>Below is the code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;!-- Dependencias/Elementos --&gt;
    &lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
    &lt;link rel="import" href="../../bower_components/iron-label/iron-label.html"&gt;
    &lt;link rel="import" href="../../bower_components/iron-pages/iron-pages.html"&gt;
  
    &lt;link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"&gt;
    &lt;link rel="import" href="../../bower_components/paper-input/paper-input.html"&gt;
    &lt;link rel="import" href="../../bower_components/paper-button/paper-button.html"&gt;
    &lt;link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"&gt;
  
  &lt;/head&gt;
  
  &lt;dom-module id="protocolo-app"&gt;
      &lt;style&gt;
        :host {
          display: block;
        }
        .card {
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
          padding: 16px;
          margin: 24px;
          border-radius: 5px;
          background-color: #fff;
          color: #757575;
        }
        .inputGray{
          background-color: #555;
          color: #fff;
        }
        h1 {
          font-size: 22px;
          margin: 16px 0;
          color: #212121;
        }
        paper-tabs[grayTab]{
          background: #eee;
          margin-top: 3%;
          margin-bottom: 3%; 
        }
        .flex {
          @apply(--layout-horizontal);
        }
        .flex-horizontal-with-ratios {
          @apply(--layout-horizontal);
        }
        .flexchild {
          @apply(--layout-flex);
        }
        .flex2child {
          @apply(--layout-flex-2);
        }
        .flex3child {
          @apply(--layout-flex-3);
        }
        .flex-center-justified {
          @apply(--layout-horizontal);
          @apply(--layout-center-justified);
        }
        .flex-equal-justified {
          @apply(--layout-horizontal);
          @apply(--layout-justified);
        }
        .flex-equal-around-justified {
          @apply(--layout-horizontal);
          @apply(--layout-around-justified);
        }
        paper-button.gray {
        background: #eee;
        color: #000;
        }
        paper-button.gray:hover {
        background: #555;
        }
        paper-button[disabled],
        paper-button[toggles][active] {
        background: red;
        }
      &lt;/style&gt;
  
    &lt;template&gt; 
      &lt;div class="card"&gt;
        &lt;h1&gt;Alta de Protocolos&lt;/h1&gt;
        &lt;div class="cointainer flex-horizontal-with-ratios"&gt;
          &lt;div class="flex2child"&gt;
            &lt;iron-label&gt;Nombre de Protocolo&lt;/iron-label&gt;
          &lt;/div&gt;
          &lt;div class="flexchild"&gt;
            &lt;iron-label&gt;Núm. Visitas&lt;/iron-label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="cointainer flex-horizontal-with-ratios"&gt;
          &lt;div class="flex2child"&gt;
            &lt;paper-input name="protocol" id="protocol" value="{{protocol}}"&gt;&lt;/paper-input&gt;
          &lt;/div&gt;
          &lt;div class="flexchild"&gt;
            &lt;paper-input name="visit" id="visit" value="{{visits}}" prevent-invalid-input allowed-pattern="[0-9]" on-change="visitChanged"&gt;&lt;/paper-input&gt;
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;!-- Tab's Element--&gt;
          &lt;paper-tabs selected="{{selected}}" scrollable no-slide noink grayTab&gt;
            &lt;template id="tabs" is="dom-repeat" items="{{tabArray}}"&gt;
             &lt;paper-tab&gt;{{item.value}}&lt;/paper-tab&gt;
            &lt;/template&gt;
          &lt;/paper-tabs&gt;
          &lt;!-- /Tab's Element--&gt;
          &lt;!-- iron-pages Element's--&gt;
          &lt;iron-pages selected="{{selected}}"&gt;
            &lt;template id="pages" is="dom-repeat" items="{{tabArray}}"&gt;
              &lt;div&gt;
                &lt;template id="inputs" is="dom-repeat" items="{{concat(tabArray.array, index)}}"&gt;
                  &lt;div class="container flex"&gt;
                    &lt;div&gt;
                      &lt;paper-input id="input" value= "{{item.value}}" placeholder="{{item.placeholder}}"&gt;&lt;/paper-input&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;paper-button class="gray" raised on-tap="delInput"&gt;Eliminar&lt;/paper-button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/template&gt;
                &lt;div class="container flex"&gt;
                  &lt;paper-button class="gray" raised on-tap="addInput"&gt;Agregar&lt;/paper-button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/template&gt;
          &lt;/iron-pages&gt;
          &lt;!-- /iron-pages Element's--&gt;
        &lt;div class="container flex-center-justified"&gt;
          &lt;div&gt;
            &lt;paper-button class="gray" raised&gt;Cancelar&lt;/paper-button&gt;
            &lt;paper-button class="gray" raised&gt;Guardar&lt;/paper-button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  &lt;/don-module&gt;
  
    &lt;script&gt;
      Polymer({
  
        is: 'protocolo-app',
  
        properties: {
          protocol: {
            type: String,
            value: ""
          },
          visits:{
            type:Number,
            value: 3,
            notify: true
          },
          tabArray: {
            type: Array,
            value: [{value:"visita1"},{value:"visita2"},{value:"visita3"}]
          },
          inputArray: {
            type: Array,
            value: [{value:"",placeholder:"t1_input1"},{value:"",placeholder:"t1_input2"},{value:"",placeholder:"t1_input3"}]
          }
        },
  
        //funcion que agrega input's
        addInput: function(){
          this.push('inputArray0',{value:"",placeholder:""});
        },
        //funcion que elimina input's
        delInput: function(e){
          this.splice('inputArray0',e.model.index,1);
        },
        creaArrayTabs: function(e){
           console.log(this.value);
        },
        concat: function(v1, v2){
          var res = v1 + v2;
          alert("Concatenacion: " + res);
          return v1 + v2;
        },
        //funcion que carga los arrays necesarios para la aplicacion
        visitChanged: function(e){
          //alert("Valor: " + this.$.visit.value);
          //limpiamos el array para agregar las nuevas tabs
          this.splice('tabArray',e.model);
          //asignamos a la variable max el valor del input
          var max = this.$.visit.value;
          for (i = 0; i &lt; max; i++) { 
            //alert("Prueba " + i);
            this.push('tabArray',{value:"Visita " + i, array:"inputArray"});
            this['inputArray'+ i] = [];
            for (j = 0; j &lt; 3; j++) {
              this.push('inputArray' + i,{value:"",placeholder:"t"+ i + "_input"+j});
            }
          }
        }
      });
    &lt;/script&gt;
  </code></pre>