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 决定在呈现项目少于之前的渲染。解决方法是使用repeat directive。它的第二个参数是一个函数，它帮助 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>`
    )}
  `;
}

LitElement 从列表中删除项目

LitElement remove item from list

javascript

web-component

polymer

lit-element