Лит-элемент - не могу получить идентификатор предмета от объекта - PullRequest
Новая
       29

Лит-элемент - не могу получить идентификатор предмета от объекта

0 голосов
/ 21 января 2019

Я изучаю lit-element и столкнулся с небольшой проблемой. Я пытаюсь настроить возможность удаления Предмета из моего списка, но я не могу получить идентификатор моего Предмета, который встречается как неопределенный при тестировании. это с console.log. У меня есть три компонента add-item.js, который добавляет элементы в список, который работает нормально. app.js - это основной компонент, который обрабатывает автоматическое обновление страницы, а также основной рендеринг страницы, где у меня есть прослушиватели событий для addItem и removeItem. Затем у меня есть компонент todo-item, в котором у меня есть объект, который я пытаюсь получить для функции удаления. Я в недоумении от того, что я делаю здесь неправильно, и надеялся, что кто-нибудь может взглянуть и указать мне правильное направление вот код пока. 

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);
```

Я хочу получить идентификатор элемента, чтобы я мог удалить его из списка, например, если у меня есть 5 элементов, один, два, три, четыре, пять, и я нажимаю кнопку, чтобы удалить третий элемент, который он должен быть удален, а список обновлен с остальными элементами .. сейчас он удаляет элементы, но это последний элемент в списке, чего я не хочу, чтобы происходило.

С нетерпением жду некоторой помощи по этому вопросу, чтобы я мог двигаться вперед с проектом спасибо.

1 Ответ

0 голосов
/ 22 января 2019

Проблемы устранены,

Я не предоставлял весь массив, только один элемент.После исправления кода я смог получить идентификатор объекта и продолжить работу с моим проектом, как и ожидалось.

...