3

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

  • 标签它用标签的点渲染出来，但没有数据。我想知道是否可以帮助我理解为什么会发生这种情况。这是我的代码 app.js ''' import {LitElement, html} from 'lit-element'; 导入'./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);
'''

    我正在寻找的结果是将存储在本地存储中的数据列在我的渲染页面上。

    • 4

    1 回答 1

    8

    属性始终是文本。因为todoList一个数组，它是一个属性，而不是属性。尝试将绑定作为属性：.todoList="${this.todoList}". 见https://lit-element.polymer-project.org/guide/templates#bind-properties-to-child-elements

    于 2019-01-18T00:23:36.053 回答