Как правильно обрабатывать изменение реквизита с помощью компонента LitElement? - PullRequest
Новая
       66

Как правильно обрабатывать изменение реквизита с помощью компонента LitElement?

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

Мой сценарий: у меня есть веб-компонент, созданный с помощью LitElement, который имеет свойство объекта. Чтобы инициализировать его, я жду, когда элемент будет создан: 

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const instance = document.querySelector("#myInstance");
        instance.config = {
          data: [
            { firstName: "John", lastName: "Doe", age: 32 },
            { firstName: "Jane", lastName: "Boe", age: 30 },
          ]
        };
      });
    </script>
    <my-component id="myInstance"></my-component>

Допустим, я собираюсь время от времени менять эту data опору. Я хотел бы проверить значение data после его изменения, а затем решить, что мне делать дальше. Чтобы сделать это, это код моего веб-компонента: 

@customElement("my-component")
export class MyComponent extends LitElement {
  @property({ type: Object }) data: Object;

  protected updated(_changedProperties: Map<PropertyKey, unknown>): void {
    console.log(_changedProperties);
  }

  render() {
      return html`
        <div>blabla</div>
      `;
  }
}

Проблема в том, что _changedProperties карта имеет data, но она все еще не определена. Что мне здесь не хватает?

1 Ответ

1 голос
/ 11 марта 2020

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

оно выглядит как это 

if (_changedProperties.has('myProperty')) {
  // react to a myProperty change
  console.log('The new value of myProperty is', this.myProperty);
}
...