Лит-элемент передачи данных от одного компонента к другому

Question

В настоящее время я учусь, как для пользователя lit-element v2.0.0-rc.2 У меня есть два компонента app.js и list-items.js. В app.js я собираю данные из локального хранилища и сохраняю их в this.todoList. Затем я вызываю this.todoList в моем list-items.js, но проблема, с которой я сталкиваюсь, заключается в том, что он не передает данные в виде массива. но как объект я пытаюсь вывести эти данные в элементы списка, все, что я получаю, когда я делаю console.log this.todoList [объект] в моем

теги, которые он выводит с точками для тега, но без данных. Мне было интересно, могу ли я получить некоторую помощь в понимании, почему это происходит. вот мой код app.js ''' import {LitElement, html} из'lit-element'; import './add-item'; import './list-items';

class TodoApp extends LitElement{

static get properties(){
    return{
        todoList: Array
    }
}

constructor(){
    super();
    let list = JSON.parse(localStorage.getItem('todo-list'));
    this.todoList = list === null ? [] : list;

}

render(){
    return html `
    <h1>Hello todo App</h1> 
    <add-item></add-item>  
    <list-items todoList=${this.todoList}></list-items>     
    `;
    }
}

customElements.define('todo-app', TodoApp)

list-items.js
import { LitElement, html } from 'lit-element';
import {repeat} from 'lit-html/directives/repeat.js';
import './todo-item';

class ListItems extends LitElement {
static get properties(){
    return{
        todoList: Array
    }
}

constructor(){
    super();
    this.todoList = [];

}

render(){
    console.log(this.todoList)
    return html `
        <ul>${repeat(this.todoList, (todo) => html`<todo-item 
todoItem=${todo.item}></todo-item`)}</ul>
    `;
    }
}

customElements.define('list-items', ListItems);
'''

В результате я ищу данные, хранящиеся в локальном хранилище, которые будут перечислены на моей отрендеренной странице.

Answer 1

Атрибуты всегда текстовые. Так как todoList массив, это свойство, а не атрибут. Попробуйте связать как свойство: .todoList="${this.todoList}", См. https://lit-element.polymer-project.org/guide/templates