javascript - 如何将数组上的更改反射(reflect)到 lit-element 中渲染的 html 中？

Question

我有一个简单的 1,2,3 数组，我循环渲染段落。问题是，每当我向数组添加类似 4 的内容时，它不会出现在屏幕上，但日志显示数字 4 已成功添加。我该怎么做？我使用的是lit-element 2.0.0(版本非常重要，this.requestUpdate()在这里不起作用，但在2.3.1中起作用)这是代码:

class XApp extends LitElement {

  static get properties() {
    return {
      items:{
        type:Array,
      }
    }
  }

  constructor() {
    super();
    this.items = [1,2,3];
  }

  firstUpdated(changedProperties) {
    if (super.firstUpdated) {
      super.firstUpdated(changedProperties);
    }
    const list = document.querySelector(".list");

    list.addEventListener("click", e => {
        console.log(e.target);
        'Origin: ', event.composedPath()[0];
    })
  }

  render() {
    return html`

      <ul class="list" @click="${(e) => console.log(e.currentTarget)}">
        <li class="item">Wash dishes</li>
        <li class="item">Walk your dog</li>
      </ul>

      <div
        <slot></slot>
        ${this.items.map(item => html`<p>${item}</p>`)}
      </div>

      <button @click="${this.change}">Change</button>

    `;
  }

  change(e){
    console.log("Try Change");
    this.items.unshift(4);
    console.log(this.items);
  }  
}

Answer 1

您需要this.requestUpdate更新函数中的状态

change(e){
    console.log("Try Change");
    this.items.unshift(4);
    console.log(this.items);
    this.requestUpdate();
}

您可以在这里查看stackblitz ，希望有帮助