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

问题描述

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

标记中的[object]，它为标记渲染了点，但是没有数据.我想知道我能否得到一些帮助来理解为什么会这样.这是我的代码 app.js ''' 从'lit-element'导入{LitElement，html}; 导入'./add-item'; 导入'./list-items';

I am currently learning how to user lit-element v2.0.0-rc.2 I have two components app.js and list-items.js. In app.js I am collecting data from local storage and storing it in this.todoList, Im then calling this.todoList in my list-items.js but the problem I am running into is that it is not passing the data as an array but as an object, I am trying to output that data in list-items all Im getting when I do a console.log of this.todoList is [object] in my

tags it is rendering out with dots for the tag but no data. I was wondering If i could get some help in understanding why this is happening . here is my code app.js ''' import {LitElement, html} from '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);
'''

我要寻找的结果是将要存储在本地存储中的数据列在呈现的页面上.

the result I am looking for is the for the data stored in local storage to be listed on my rendered page.

推荐答案

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

Attributes are always text. Because todoList an array, it's a property, not attribute. Try binding as a property: .todoList="${this.todoList}". See https://lit-element.polymer-project.org/guide/templates#bind-properties-to-child-elements

这篇关于亮元素将数据从一个组件传递到另一组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！