我正在学习 lit-element 并遇到了一个小问题我正在尝试设置从列表中删除项目的能力，但是当我使用控制台测试它时，我无法获取我的项目的 id 它是未定义的。日志。我有三个组件 add-item.js 将项目添加到工作正常的列表中。app.js 是处理页面自动刷新以及页面主渲染的主要组件，这是我为 addItem 和 removeItem 设置事件侦听器的地方。然后我有 todo-item 组件，这是我试图获取删除功能的 ID 的对象。我对我在这里做错了什么感到茫然，并希望有人可以看看并指出我正确的方向，这是迄今为止的代码。
add-item.js
```
import {LitElement, html} from 'lit-element';
class AddItem extends LitElement{
static get properties(){
return{
todoList: Array,
todoItem: String
}
}
constructor(){
super();
this.todoItem = '';
}
inputKeypress(e){
if(e.keyCode == 13){
e.target.value="";
this.onAddItem();
}else{
this.todoItem = e.target.value;
}
}
onAddItem(){
if(this.todoItem.length > 0){
let storedTodoList = JSON.parse(localStorage.getItem('todo-
list'));
storedTodoList = storedTodoList === null ? [] : storedTodoList;
storedTodoList.push({
id: new Date().valueOf(),
item: this.todoItem,
done: false
});
localStorage.setItem('todo-list',
JSON.stringify(storedTodoList));
this.dispatchEvent(new CustomEvent('addItem',{
bubbles: true,
composed: true,
detail: {
todoList: storedTodoList
}
}));
this.todoItem = '';
}
}
render(){
return html `
<div>
<input value=${this.todoItem}
@keyup="${(e) => this.inputKeypress(e)}">
</input>
<button @click="${() => this.onAddItem()}">Add Item</button>
</div>
`;
}
}
customElements.define('add-item', AddItem)
```
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;
}
firstUpdated(){
this.addEventListener('addItem', (e) => {
this.todoList = e.detail.todoList;
});
this.addEventListener('removeItem', (e) => {
let index = this.todoList.map(function(item) {return
item.id}).indexOf(e.detail.itemId);
this.todoList.splice(index, 1);
this.todoList = _.clone(this.todoList);
localStorage.setItem('todo-list', JSON.stringify(this.todoList));
})
}
render(){
return html `
<h1>Hello todo App</h1>
<add-item></add-item>
<list-items .todoList=${this.todoList}></list-items>
`;
}
}
customElements.define('todo-app', TodoApp)
```
todo-item.js
```
import {LitElement, html} from 'lit-element';
class TodoItem extends LitElement{
static get properties(){
return{
todoItem: Object
}
}
constructor(){
super();
this.todoItem = {};
}
onRemove(id){
this.dispatchEvent(new CustomEvent('removeItem',{
bubbles: true,
composed: true,
detail:{
itemId: id
}
}));
}
render(){
console.log(this.todoItem.id);
return html `<li>${this.todoItem}</li>
<button @click="${() =>
this.onRemove(this.todoItem.id)}">Remove</button>`;
}
}
customElements.define('todo-item', TodoItem);
```
我正在寻找该项目的 ID，以便我可以将其从列表中删除，例如，如果我有 5 个项目，一、二、三、四、五，然后单击按钮以删除应该删除的第三个项目并且列表更新了剩余的项目..现在它正在删除这些项目，但它是列表中的最后一个，这是我不希望发生的。
期待在这方面的一些帮助，以便我可以推进项目谢谢。