Question

我正在学习轻元素，并且遇到了一个小问题，我正在尝试设置从列表中删除商品的功能，但是我无法获取测试时遇到的未定义商品的ID它与console.log。我有三个组件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个项目（一，二，三，四，五），然后单击按钮以删除其第三项应该删除并用剩余的项目更新列表..现在它正在删除项目，但这是列表中的最后一个，这是我不想发生的事情。

期待对此有所帮助，以便我可以继续进行该项目谢谢。

Answer 1

问题已解决，

我没有提供整个数组，只是一个元素。修复代码后，我可以获取对象的ID并按预期进行项目。

点亮元素-无法从对象获取项目的ID

1 个答案: