LitElement: - Проблема с перерисовкой страницы и поведением компонента по умолчанию - PullRequest
Новая
       39

LitElement: - Проблема с перерисовкой страницы и поведением компонента по умолчанию

0 голосов
/ 27 апреля 2020

Я изучаю литературные элементы и практикуюсь на примере приложения To-Do List.

Обобщенная информация о коде приложения. js является основным компонентом, который обрабатывает автоматическое обновление sh страницы. Так же как и основной рендеринг страницы, здесь у меня есть прослушиватели событий для addItem и removeItem. Теперь я сталкиваюсь с 2 проблемами, связанными с removeItem, подробности приведены ниже: -

URL: - https://stackblitz.com/edit/to-do-list-lit-element?file=src%2Fcomponents%2Fapp.js

  1. Я могу вызвать событие removeItem & удалить индекс из массива. Но после удаления я хочу удалить его из списка, чего в данном случае не происходит. console.log также показывает массив с ожидаемыми значениями. Чтобы сохранить состояние, я использовал функцию клонирования библиотек loda sh и передал ее в localstarge для установки элемента.

Использование явно super.performUpdate (); также не работал в этом случае. 

this.addEventListener('removeItem', (e) => {
      console.log(e.detail.id);
      let obj = JSON.parse(this.todoList);

      let index = obj.map(function(item) {return item.id}).indexOf(e.detail.itemId);
      obj.splice(index, 1);

// Maintain state
      this.todoList = _.clone(obj);
      console.log(JSON.stringify(this.todoList));
      localStorage.setItem('todo-list', JSON.stringify(this.todoList));
      this.requestUpdate();
    })
Если я удаляю все элементы из списка. Компонент html моей страницы автоматически исчезает. Только после удаления истории браузера или файлов cookie, он появляется снова и работает правильно. Ожидаемая функциональность: - даже после удаления всех элементов из списка, кнопка AddData и текст ввода должны позволять отправлять новые записи.

С нетерпением ждем некоторой помощи по этому вопросу, чтобы я мог двигаться вперед с проектом, спасибо вы

...