LitElement 从列表中删除项目

Question

当页面首次加载时，由以下代码生成的删除按钮按预期工作。但是，如果您更改其中一个<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>`
    )}
  `;
}