Question

我目前正在学习如何使用lit-element v2.0.0-rc.2。我有两个组件app.js和list-items.js。在app.js中，我正在从本地存储中收集数据并将其存储在this.todoList中，然后我在list-items.js中调用this.todoList，但是我遇到的问题是它没有将数据作为数组传递但是作为一个对象，我试图将这些数据以列表项的形式输出，当我执行console.im时，我得到的所有.im.todoList的日志是我的

标记中的[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

亮元素将数据从一个组件传递到另一组件

1 个答案: