lit-element 将数据从一个组件传递到另一个组件

Question

我目前正在学习如何使用 lit-element v2.0.0-rc.2 我有两个组件 app.js 和 list-items.js。在 app.js 中，我从本地存储中收集数据并将其存储在 this.todoList 中，然后我在我的列表中调用 this.todoList-items.js，但我的问题是运行 into 是它不是将数据作为数组传递，而是作为对象传递，我试图在列表项中输出该数据，当我执行 console.log of this.todoList is [object]在我的

标签中，它呈现出带有点的标签但没有数据。我想知道我是否可以得到一些帮助来理解为什么会这样。这是我的代码 app.js ''' 从 'lit-element' 导入 {LitElement, html}; 导入'./add-item'；导入 './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#bind-properties-to-child-elements (Updated link for Lit, https://lit.dev/docs/templates/expressions/#property-expressions)

lit-element 将数据从一个组件传递到另一个组件

lit-element passing data from one component to another

polymer-3.x

lit-element

lit-html