동적으로 바인딩 변수 이름 생성

Question

나는 열을 생성하기 위해 dom-repeat을 사용하는 데이터 표가 있습니다.

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

입력 요소에 값을 입력하여 열을 필터링하는 데 사용되는 값을 바인딩합니다.

내 문제는 각 열은 동일한 filterInput 변수에 바인딩됩니다.

각 특정 열의 변수를 사용하여 바인딩 할 수있는 방법이 있습니까?

어떻게 든 각 열에 바인딩 변수를 생성 할 수 있습니까? , filterInput[1] 등 dom-repeat과 함께 제공되는 index 변수를 사용하면?

Answer 1

요소와 함께 작동합니다.

HTML 템플릿

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

폴리머 요소

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}, 
    ] 
} 

전체 폴리머 요소

<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>