Polymer 3.x lit元素将数据从一个组件传递到另一个组件
我目前正在学习如何使用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]在我的Polymer 3.x lit元素将数据从一个组件传递到另一个组件,polymer-3.x,lit-element,lit-html,Polymer 3.x,Lit Element,Lit Html,我目前正在学习如何使用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]在我的标记中,它是用标记的点渲染出来的,
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);
'''
类TodoApp扩展了LitElement{
静态获取属性(){
返回{
todoList:数组
}
}
构造函数(){
超级();
let list=JSON.parse(localStorage.getItem('todo-list');
this.todoList=list==null?[]:list;
}
render(){
返回html`
你好todo应用程序
`;
}
}
自定义元素。定义('todo-app',TodoApp)
list-items.js
从'lit element'导入{LitElement,html};
从'lit html/directions/repeat.js'导入{repeat};
导入“./todo项”;
类ListItems扩展了LitElement{
静态获取属性(){
返回{
todoList:数组
}
}
构造函数(){
超级();
this.todoList=[];
}
render(){
console.log(this.todoList)
返回html`
${repeat(this.todoList,(todo)=>html`属性始终是文本。因为
todoList
是一个数组,它是一个属性,而不是属性。请尝试作为属性绑定:.todoList=“${this.todoList}”
。请参见萨德感谢您的帮助,这回答了我的问题,我在过程中学到了更多,当这种情况发生时总是很好。再次感谢您,就像您完成了我正在做的相同教程一样。您完成过代码吗?是的,我完成了,我遵循了萨德给出的答案。