데이터 변경을 반영하지 않는 dom-repeat

Question

계산 된 속성 및 다양한 다른 기법을 사용했지만보기에 내 모델이 반영되지 않았습니다. 모델은 업데이트되지만 뷰는 업데이트되지 않습니다.

보기

<div class="selection"> 
    <ul> 
    <template is="dom-repeat" items="{{state.selection}}"> 
    <li> 
    <a data-selection$="{{item.id}}" on-click="selection">{{item.name}}</a> 
    </li> 
    </template> 
    </ul> 
</div> 

<div class="selection sub-selection"> 
<template is="dom-repeat" items="{{state.subSelection}}"> 
    <ul id$="subselection-{{item.id}}" class$="[[item.active]]"> 
    <template is="dom-repeat" items="{{item.selections}}"> 
     <li> 
     <a data-selection="{{item.id}}" on-click="selection">{{item.name}}</a> 
     </li> 
    </template> 
    </ul> 
</template> 
</div> 

모델

constructor(){ 
    super() 
    this.state = { 
     selection: [ 
      { 
      id: 1, 
      name: 'Selection One' 
      }, 
      { 
      id: 2, 
      name: 'Selection Two' 
      } 
     ], 

    subSelection: [ 
      { 
      id: 1, 
      name: 'Sub Selection One', 
      active: 'active' 
      }, 
      { 
      id: 2, 
      name: 'Sub Selection Two', 
      active: '' 
      } 
     ] 
    } 

    selection(event){ 
    event.preventDefault(); 
    let self = this; 
    let id = parseInt(event.currentTarget.getAttribute('data-selection')); 

    self.state.subSelection.forEach(function(key, index){ 
    if(key.id === id){ 
     key.active = 'active' 
    }else{ 
     key.active = '' 
    } 
    }); 
} 

목표는 "선택"의 항목을 클릭하여 해당 ID 값을 얻을 "세부 선택"에서와 항목을 일치하는 것 동일한 ID로 활성 값을 "활성"또는 ""으로 변경하십시오.

보기 업데이트를 제외한 모든 것이 잘 진행됩니다.

Answer 1

그래서 this.set (property, value)로 해결했습니다. 고분자는 이것이 어떻게 달성되어야하는지에있어서 매우 특별합니다. 그러나 다음은 내 업데이트 기능에서 작동했습니다.

selection(event){ 
    event.preventDefault(); 
    let self = this; 
    let id = parseInt(event.currentTarget.getAttribute('data-selection'));  
    self.state.subSelection.forEach(function(key, index){ 
     if(key.id === id){ 
     self.set("state.subSelection."+index+".active", 'active'); 
     }else{ 
     self.set("state.subSelection."+index+".active", ''); 
     } 
    ); 
}