Получение данных о свойствах из веб-компонента LitElement

Я пытаюсь создать веб-компонент со следующими функциями:
1. Нажмите кнопку, чтобы добавить элемент <textarea>.
2. После добавления текста во вновь созданный элемент <textarea> этот текст добавляется к соответствующему элементу this.list.
3. В отдельном скрипте можно получить элемент DOM с помощью document.querySelector(), а затем получить данные из this.list.
Вот что у меня есть на данный момент:

<!DOCTYPE html>
<html>
  <body>
    <my-element></my-element>
    <script type="module">
      import { LitElement, html } from "lit-element";
      import { repeat } from "lit-html/directives/repeat.js";

      class MyElement extends LitElement {
        static get properties() {
          return {
            list: { type: Array },
          };
        }
        constructor() {
          super();
          this.list = [
            { id: "1", text: "hello" },
            { id: "2", text: "hi" },
            { id: "3", text: "cool" },
          ];
        }
        render() {
          return html`
            ${repeat(this.list, item => item.id,
              item => html`<textarea>${item.text}</textarea>`
            )}
            <button @click="${this.addTextbox}">Add Textbox</button>
          `;
        }
        addTextbox(event) {
          const id = Math.random();
          this.list = [...this.list, { id, text: "" }];
          console.log(this.list); // text from new textboxes is not being added to list
        }
      }
      customElements.define("my-element", MyElement);
      </script>
      <script>
        const MyElement = document.querySelector("my-element");
        const data = MyElement.properties; // undefined
      </script>
  </body>
</html>

javascript web-component native-web-component lit-element
person Max888    schedule 21.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот пример того, как получить данные из LitElement;

Демо

import { LitElement, html } from "lit-element";


class MyElement extends LitElement {
  static get properties() {
    return {
      list: { type: Array },
    };
  }
  constructor() {
    super();
    this.list = [
      { id: "1", text: "hello" },
      { id: "2", text: "hi" },
      { id: "3", text: "cool" },
    ];
  }
  render() {
    return html`

      ${this.list.map( item=> html`${item.id}. ${item.text}<br>`)}


     <button @click="${this.addTextbox}">Add Textbox</button>
    `;
  }

  addTextbox(event) {
    const id = Math.random();
    this.list = [...this.list, { id, text: "" }];
    console.log(this.list); // text from new textboxes is not being added to list
    this.dispatchEvent(new CustomEvent('changed',{ bubles:true,composed:true, detail:{list:this.list}}));

  }

}
customElements.define("my-element", MyElement);

  const MyElement = document.querySelector("my-element");
  MyElement.addEventListener('changed',function(e){ 
    const list = e.detail.list;
    console.log('out->',list);

  });
person HakanC    schedule 22.12.2019