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 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从列表中删除项目

1 个答案: