LitElement 未更新列表中的复选框

Question

我有一个简单的检查清单，每个项目都有一个删除按钮。当我检查第一个项目然后删除它时，列表更新，删除该项目，但选中下一个项目的复选框。下一项的属性是正确的。

这是我的代码：

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

class CheckList extends LitElement {
  static get properties() {
    return {
      items: { type: Array },
    };
  }

  constructor() {
    super();
    this.items = [
      {
        id: 1,
        text: 'Item 1',
        isDone: false,
      },
      {
        id: 2,
        text: 'Item 2',
        isDone: false,
      },
    ];

    this.toggleCheck = this.toggleCheck.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
  }

  render() {
    return html`
      <ul>
        ${this.items.map(item => html`
          <li>
            <input
              type="checkbox"
              value=${item.id}
              ?checked=${item.isDone}
              @click=${this.toggleCheck}
            >
            ${item.text}
            <button @click=${this.deleteItem}>X</button>
          </li>
        `)}
      </ul>
    `;
  }

  toggleCheck(e) {
    const id = Number(e.target.value);

    this.items = this.items.map(item => {
      if (item.id === id) {
        item.isDone = !item.isDone;
      }

      return item;
    });
  }

  deleteItem(e) {
    const id = Number(e.target.parentNode.querySelector('input').value);

    this.items = this.items.filter(item => item.id !== id);
  }
}

customElements.define('check-list', CheckList);

https://stackblitz.com/edit/typescript-fylwxb

Answer 1

这是因为checked属性的行为。根据 MDN文档：

一个布尔属性，指示默认情况下（页面加载时）是否选中此复选框。它并没有指明该复选框是否被当前检查：如果该复选框的状态改变时，该内容属性不反映更改。（仅更新HTMLInputElement的checkedIDL 属性。）

实际上，在您的示例中，此行不会切换输入的选中状态：

?checked=${item.isDone}

但是通过复选框的本机行为，这也将checked 属性设置为true. 为了证明这一点，您可以尝试在单击它后以编程方式取消选中它：

// This won't have any effect if yourInputElement.checked is true
yourInputElement.removeAttribute('checked');

lit-html 可能会重用已删除行中的输入 DOM 节点来呈现后续行而不创建新行，从而保持检查属性为真。

布尔属性 binding( ?) 仅设置或删除属性。您应该改为使用属性 binding( .) 来正确更新HTMLInputElement的checked 属性。

<input type="checkbox"
       value=${item.id}
       .checked=${item.isDone}
       @click=${this.toggleCheck}>