Javascript 观察聚合物中的阵列项修饰

假设我有一个对象数组

items: {
    type: Array,
    value: [
        {a : 'Sample1', b: 'true', c: 'demo1'},
        {a : 'Sample2', b: 'false', c: 'demo'}
    ]
}

该数组被送入一个有3列的vaadin网格，第二列对应于字段“b”

 <vaadin-grid-column width="20px" >
 <template class="header">A</template>
 <template>
     <p>[[item.a]]</p>
 </template>
 </vaadin-grid-column>
     <vaadin-grid-column width="20px" >
 <template class="header">B</template>
 <template>
     <iron-icon icon="icon:mail"></iron-icon>
 </template>
 </vaadin-grid-column>
     <vaadin-grid-column width="20px" >
 <template class="header">C</template>
 <template>
     <p>[[item.c]]</p>
 </template>
</vaadin-grid-column>

目前，我已经做了以下工作：

<iron-icon icon="_changeIcon(item.b)"></iron-icon>
_changeIcon: function(flag) {
   return flag == false? 'icons:drafts' : 'icons:mail';
}

_更改图标：功能（标志）{
返回标志==false？'icons:drafts'：'icons:mail'；
}

但这是行不通的。有人能帮我一下吗？

这看起来很简单——替换网格中的项目——但这会更新值，但不会更新网格中的图标。我用（1）一个

dom if

和（2）

this.$.grid.clearCache（）

：主持人{
显示：块；
}
A.
[[项目a]]

B
C
[[项目c]]

/**
*`网格更新`
* https://stackoverflow.com/questions/49229455/
*
*@customElement
*@聚合物
*@demo/index.html
*/
类GridUpdate扩展了Polymer.Element{
静态get是（）{return'grid update'；}
静态获取属性（）{
返回{
项目：{
类型：数组，
值：（）=>{return[]；}
}
};
}
就绪（）{
super.ready（）；
this.items=[{a:'Sample1'，b:true，c:'demo1'}，
{a:'Sample2'，b:false，c:'demo2'}]；
}
_选择项目（e）{
设指数=e.model.index；
this.items[index].b=！this.items[index].b；
这是$.grid.clearCache（）；
}
}
window.customElements.define（GridUpdate.is，GridUpdate）；

此代码可复制到基本PSK元素中

---

尝试一下。

谢谢你的回答。除了clearCache（）调用之外，我做了一些非常类似的事情。将此标记为正确答案。

<iron-icon icon="_changeIcon(item.b)"></iron-icon>
_changeIcon: function(flag) {
   return flag == false? 'icons:drafts' : 'icons:mail';
}

<dom-module id="grid-update">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <vaadin-grid id="grid" items="[[items]]">
      <vaadin-grid-column width="20px">
        <template class="header">A</template>
        <template>
           <p>[[item.a]]</p>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column width="20px" >
        <template class="header">B</template>
        <template>
          <template is="dom-if" if="[[item.b]]">
            <paper-icon-button icon="icons:mail" on-click="_selectItem"></paper-icon-button>
          </template>
          <template is="dom-if" if="[[!item.b]]">
            <paper-icon-button icon="icons:draft" on-click="_selectItem"></paper-icon-button>
          </template>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column width="20px" >
        <template class="header">C</template>
        <template>
           <p>[[item.c]]</p>
        </template>
      </vaadin-grid-column>
    </vaadin-grid>

    <iron-iconset-svg id="iconset" name="icons" size="24">
      <svg>
        <defs>
          <g id="mail">
            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" class="style-scope iron-icon"></path>
          </g>
          <g id="draft">
            <path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z" class="style-scope iron-icon"></path>
          </g>
        </defs>
      </svg>
    </iron-iconset-svg>
  </template>

  <script>
    /**
     * `grid-update`
     * https://stackoverflow.com/questions/49229455/
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class GridUpdate extends Polymer.Element {
      static get is() { return 'grid-update'; }
      static get properties() {
        return {
          items: {
            type: Array,
            value: () => { return []; }
          }
        };
      }

      ready() {
        super.ready();
        this.items = [{a : 'Sample1', b: true, c: 'demo1'},
                {a: 'Sample2', b: false, c: 'demo2'}];
      }

      _selectItem(e) {
        let index = e.model.index;
        this.items[index].b = !this.items[index].b;
        this.$.grid.clearCache();
      }
    }

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