Dynamically Generating Bind Variable Names

Question

I have a data grid, in which I use dom-repeat to generate the columns.

<vaadin-grid-filter value=[[filterInput]] />
 <input value={{filterInput::input}} />
</vaadin-grid-filter>

I bind the value used to filter a column with the value input into an input element.

My problem is each column binds to the same filterInput variable.

Is there any way I can bind using a variable for each specific column?

Could I somehow generate the binding variable for each column, e.g. filterInput[0], filterInput[1] etc. by using the index variable that comes with dom-repeat?

Answer 1

I make it working with an element.

HTML template

<template is="dom-repeat" items="{{technology}}">
    <input type="text" value="{{item.label::input}}">[[item.label]]<br/>
</template>

Polymer Element

technology : {
    type: Array,
    value: [
        {id:"php", label:"PHP", selected:false},
        {id:"js", label:"Javascript", selected:false},
        {id:"html", label:"HTML", selected:false},
        {id:"css", label:"CSS", selected:false},
    ]
}

Full Polymer element

<dom-module id="input-array-element">
    <template>
        <h3>Inputs Array</h3>
        <template is="dom-repeat" items="{{technology}}">
            <input type="text" value="{{item.label::input}}">[[item.label]]<br/>
        </template><br>
    </template>
    <script>
    class InputArrayElement extends Polymer.Element {
        static get is() { return 'input-array-element'; }

        static get properties() {
            return {
                technology : {
                    type: Array,
                    value: [
                        {id:"php", label:"PHP", selected:false},
                        {id:"js", label:"Javascript", selected:false},
                        {id:"html", label:"HTML", selected:false},
                        {id:"css", label:"CSS", selected:false},
                    ],
                    notify: true
                }
            }
        }

        ready() {
            super.ready();
            this.addEventListener("technology-changed", function(e){
               console.log(e); 
            });
        }

    }

    window.customElements.define(InputArrayElement.is, InputArrayElement);        
    </script>
</dom-module>