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
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.
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 (Updated link for Lit, https://lit.dev/docs/templates/expressions/#property-expressions)