LitElement 從列表中刪除項目

Question

當頁面首次加載時，由以下代碼生成的刪除按鈕按預期工作。 但是，如果您更改<textarea>元素之一中的<textarea> ，刪除按鈕將不再正常工作。 我怎樣才能解決這個問題？

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return {
      list: { type: Array },
    };
  }
  constructor() {
    super();
    this.list = [
      { id: "1", text: "hello" },
      { id: "2", text: "hi" },
      { id: "3", text: "cool" },
    ];
  }
  render() {
    return html`${this.list.map(item =>
        html`<textarea>${item.text}</textarea><button id="${item.id}" @click="${this.delete}">X</button>`
    )}`;
  }
  delete(event) {
    const id = event.target.id;
    this.list = this.list.filter(item => item.id !== id);
  }
}
customElements.define("my-element", MyElement);

Answer 1

我不確定確切的原因，但我認為這與 lit-html 決定在呈現比之前呈現的項目少的列表時要刪除哪些 DOM 元素的方式有關。 解決方案是使用repeat指令。 它將一個函數作為它的第二個參數，該函數幫助 lit-html 識別哪些 DOM 元素對應於數組中的哪些項目：

import { repeat } from 'lit-html/directives/repeat.js'

// ...
render(){
  return html`
    ${repeat(this.list, item => item.id,
      item => html`<textarea>${item.text}</textarea><button id="${item.id}" @click="${this.delete}">X</button><br>`
    )}
  `;
}