Polymer 3 lit-element：数组对象更改未被 requestRender 拾取

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
}

希望对您有所帮助。

Polymer 3 lit-element：数组对象更改未被 requestRender 拾取

Polymer 3 lit-element: Array Object changes not picked up by requestRender

javascript

polymer

polymer-3.x

lit-element