Как я могу отразить изменения в массиве для моего отрисованного html в lit-element? - PullRequest
Новая
       22

Как я могу отразить изменения в массиве для моего отрисованного html в lit-element?

0 голосов
/ 25 марта 2020

У меня есть простой массив из 1,2,3, который я oop для отображения абзацев. Проблема в том, что всякий раз, когда я добавляю что-то вроде 4 в массив, это не появляется на экране, но журнал показывает, что число 4 было добавлено успешно. Как мне это сделать? Я использую lit-element 2.0.0 (версия очень важна, this.requestUpdate () здесь не работает, но работает в 2.3.1) Вот код: 

class XApp extends LitElement {

  static get properties() {
    return {
      items:{
        type:Array,
      }
    }
  }

  constructor() {
    super();
    this.items = [1,2,3];
  }

  firstUpdated(changedProperties) {
    if (super.firstUpdated) {
      super.firstUpdated(changedProperties);
    }
    const list = document.querySelector(".list");

    list.addEventListener("click", e => {
        console.log(e.target);
        'Origin: ', event.composedPath()[0];
    })
  }

  render() {
    return html`

      <ul class="list" @click="${(e) => console.log(e.currentTarget)}">
        <li class="item">Wash dishes</li>
        <li class="item">Walk your dog</li>
      </ul>

      <div
        <slot></slot>
        ${this.items.map(item => html`<p>${item}</p>`)}
      </div>

      <button @click="${this.change}">Change</button>

    `;
  }

  change(e){
    console.log("Try Change");
    this.items.unshift(4);
    console.log(this.items);
  }  
}

1 Ответ

3 голосов
/ 25 марта 2020

Вам нужно this.requestUpdate , чтобы обновить состояние в вашей функции 

change(e){
    console.log("Try Change");
    this.items.unshift(4);
    console.log(this.items);
    this.requestUpdate();
}

Вы можете проверить здесь stackblitz , надеюсь, это поможет

...