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

问题: I have an object as below. Now when I change a property and call requestRender it won't trigger. As far as I see it, the property change is not detected. How can I achieve...

问题:

I have an object as below. Now when I change a property and call requestRender it won't trigger. As far as I see it, the property change is not detected. How can I achieve this?

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


回答1:

lit-element requires you to manage your properties immutably, so to update that data point, something like the following will be required:

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
}

The above is a very complete, but ES5(ish) answer to this problem. It's also possible to do this with more modern JS that would make this much more manageable.

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

Hope that helps.

  • 发表于 2018-07-13 23:40
  • 阅读 ( 358 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除