ЛитЭлемент не обновляет флажок в списке - PullRequest
Новая
       21

ЛитЭлемент не обновляет флажок в списке

2 голосов
/ 03 мая 2019

У меня есть простой контрольный список с кнопкой удаления для каждого элемента. Когда я проверяю первый элемент, а затем удаляю его, список обновляется, удаляя элемент, но флажок следующего элемента отмечен. Свойства следующего элемента верны.

Вот мой код: 

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

1 Ответ

3 голосов
/ 05 мая 2019

Это связано с поведением атрибута checked. Согласно MDN документы :

Логический атрибут, указывающий, установлен ли этот флажок по умолчанию (при загрузке страницы). Значение not указывает, установлен ли данный флажок в настоящее время : если состояние флажка изменено, этот атрибут содержимого не отражает изменения. (Обновляется только атрибут HTMLInputElement IDL *1011*.)

Фактически, в вашем примере проверенное состояние входа не переключается этой строкой: 

?checked=${item.isDone}

но с помощью собственного поведения флажка, который также устанавливает свойство checked в true. Чтобы доказать это, вы можете попробовать программно снять галочку после нажатия на него: 

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

lit-html, вероятно, повторно использует входной DOM-узел из удаленной строки, чтобы отобразить следующую строку, не создавая новую, таким образом сохраняя свойство selected в true.

Привязка логического атрибута (?) только устанавливает или удаляет атрибут . Вместо этого следует использовать привязку свойства (.) для правильного обновления HTMLInputElement * checked свойства . 

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