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