lit-element passing data from one component to another

百般思念 提交于 2020-01-15 06:20:10

问题


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.


    回答1:


    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



    来源:https://stackoverflow.com/questions/54245124/lit-element-passing-data-from-one-component-to-another

  • 易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
    该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!