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

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

0 голосов
/ 18 января 2019

В настоящее время я учусь, как использовать 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 - это [object] в моих

тегах, которые он выводит с точками для тега, нонет данных.Мне было интересно, могу ли я получить некоторую помощь в понимании, почему это происходит.вот мой код 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);
'''

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

1 Ответ

0 голосов
/ 18 января 2019

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

...