如何将数组的更改反映到我在 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，希望对你有帮助

如何将数组的更改反映到我在 lit-element 中渲染的 html？

How can I reflect changes on an array to my rendered html in lit-element?

javascript

arrays

web-component

lit-element