Javascript LitElement从列表中删除项

当页面第一次加载时，由下面的代码生成的删除按钮按预期工作。但是，如果更改其中一个

元素中的文本，则删除按钮将不再正常工作。我怎样才能解决这个问题

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);

从'lit element'导入{LitElement，html}；
类MyElement扩展了LitElement{
静态获取属性（）{
返回{
列表：{type:Array}，
};
}
构造函数（）{
超级（）；
此列表=[
{id:“1”，文本：“hello”}，
{id:“2”，文本：“hi”}，
{id:“3”，文本：“酷”}，
];
}
render（）{
返回html`${this.list.map（项=>
html`${item.text}X`
)}`;
}
删除（事件）{
const id=event.target.id；
this.list=this.list.filter（item=>item.id！==id）；
}
}
自定义元素。定义（“我的元素”，MyElement）；

我不确定确切的原因，但我认为这与lit html在呈现项目少于上一次呈现的列表时决定删除哪些DOM元素的方式有关。解决方法是使用。它的第二个参数是一个函数，该函数帮助识别哪些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>`
    )}
  `;
}

从'lit html/directions/repeat.js'导入{repeat}
// ...
render（）{
返回html`
${重复（this.list，item=>item.id，
item=>html`${item.text}X
`
)}
`;
}

Hm。奇怪的是列表是正确的，但显示不正确。查看编辑“hi”到“hi there”，选项卡，然后删除。控制台中的列表正确，显示不正确。实际显示的列表已更新，textarea的内容也已更新（如果更改list.text，innerHtml将显示更新的内容），但编辑的textarea的内容不会以可视方式更新。对于-element也会发生同样的错误。这就像浏览器记住了编辑的输入框，并在更新后保持其内容在视觉上完好无损。请尝试使用。我同意@grohjy的观点，列表实际上已更新，元素再次呈现，您可以看到，如果您进行检查，这只是浏览器在删除前两个文本区域后在视觉上保持前两个文本区域的一种方式。另一个证明是某种“缓存”的事实是，在重新渲染后，您仍然可以看到您键入的内容，但由于您没有更新

this.list

，因此每次它都应该使用初始值进行渲染（如果您进行检查，它就会更新）。