Polymer 3 lit-element：请求渲染未拾取数组对象更改

Question

我有一个对象如下。现在，当我更改属性并调用 requestRender 时，它不会触发。据我所知，未检测到属性更改。我怎样才能做到这一点？

static get properties() {
  return {
    items: Object
    }
}

constructor() {
  super();
  this.items = {
    list: [{ a: 5, b: 6 },{ a: 5, b: 6 }]
  }
}

onClick() {
  this.items.list[1].a = 10; //change property
  requestRender(); //doesn't pick up the change...
}

Answer 1

lit-element 要求您一成不变地管理您的属性，因此要更新该数据点，将需要如下内容：

onClick() {
  let list = this.items.list.slice();
  let item = Object.assign({}, list[1]);
  item.a = 10;
  list[1] = item;
  this.items = {
    list: list
  };
  // will update on it's own with out a render request
}

上面是一个非常完整但 ES5(ish) 对这个问题的回答。也可以使用更现代的 JS 来做到这一点，这将使这更易于管理。

onClick() {
  this.items.list[1].a = 10;
  this.items = {
    ...this.items
  };
  // will update on it's own with out a render request
}

希望有帮助。