Dynamically Adding paper-dropdown-input inside a template dom-repeat

Question

I'm trying to dynamically add paper-dropdown-inputs in my project. It would look something like this:

<dom-module id="stuff-input-list">
<template>

<template is="dom-repeat" items="[[stuffs]]" as="stuff_item">
  <paper-dropwdown-input  label="[[stuff_item.name]]" items='{{stuff_item.list_values}}' filter-property="name">
     <template>
        <template is="dom-repeat" items="[[items]]" as="stuff">
                <paper-item>[[stuff.value_name]]</paper-item>
        </template>
       </template>
  </paper-dropwdown-input>
</template>

</template>


<script>

class StuffList extends Polymer.Element {
            static get is() {
                return 'stuff-input-list';
            }

            static get properties() {
                return {

                };
            }

            constructor() {
                super();
                this.stuffs = {
                  [name:'Stuff 1', list_values: [{value_name: 'Hey'}] ],
                  [name:'Stuff 2', list_values: [{value_name: 'World'}] ],
                  [name:'Stuff 3', list_values: [{value_name: '!'}] ]

                }
            }

            ready() {
                super.ready();

                Polymer.RenderStatus.afterNextRender(this, function() {

                });
            }

        }

        window.customElements.define(StuffList.is, StuffList);

</script>


</dom-module>

where stuff would be an object with an attr name and a list_values attr that is a list of objects like name.

Problems:

1) Currently, the sample code above has trouble rendering the list/paper-item. I would need to type on the search input before the lists appears.

2) I need to put this in a dialog form. My problem right now is how to return the selected values for each repeat? I could achieve this easily if I had a paper-dropdown-input for each stuff. But since I need to dynamically add stuff, I need to achieve this in a dom-repeat.

Answer 1

ad 1) You need to create properties for all data you want to bind in your template. While you can initialise those right away, your initialisation code will be run for every class/component instance, so make sure you wrap it in a function:

static get properties() {
    return {
        stuffs: {
            type: Array,
            notify: true,
            value: () => [{
                name:'Stuff 1', 
                list_values: [{value_name: 'Hey'}],
                selected_value: null
            }, {
                name:'Stuff 2', 
                list_values: [{value_name: 'World'}],
                selected_value: null
            }, {
                name:'Stuff 3',
                list_values: [{value_name: '!'}],
                selected_value: null 
            }]
        }
    };
}

If your data happens to be fetched asynchronously, keep the property (with its type and notify) and use this.set('stuffs', data) to ensure correct update of your template.

ad 2) This will also be achieved using data binding. First you'll need the above notify property on your Array property. Second, each 'stuff'-object should have its own selection value. Using the correct data binding, modifications to your Array values (by the bound paper-dropdown-inputs) will be propagated accordingly:

...
<paper-dropwdown-input  label="[[stuff_item.name]]" 
    selected-item="{{stuff_item.selected_value}}" 
    items='{{stuff_item.list_values}}' filter-property="value_name">
        ...