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 docs：

一个布尔属性，指示默认情况下（页面加载时）是否选中此复选框。它不会不指示此复选框是否已当前被选中：如果复选框的状态已更改，则此内容属性不会反映此更改。（仅更新HTMLInputElement的{{1}} IDL属性。）

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

checked

但由于复选框的本机行为，该复选框还将?checked=${item.isDone} 属性设置为checked。为了证明这一点，您可以尝试在单击它之后以编程方式取消选中它：

true

lit-html可能正在重用已删除行中的输入DOM节点，以渲染后一行而不创建新行，从而保持选中属性为真。

布尔属性绑定（// This won't have any effect if yourInputElement.checked is true yourInputElement.removeAttribute('checked');）仅设置或删除属性。相反，您应该使用属性绑定（?）来正确更新.的{{1}} 属性。

HTMLInputElement

LitElement不更新列表中的复选框

1 个答案: