I am trying to create a simple to do list in Polymer, and I have the add portion working. When I click the "delete" icon next to the item, it deletes the most recently added item instead of the one that it should delete. It looks like it's getting the wrong index of the array, and I'm not sure how to fix it? Thanks!
<dom-module id="my-todo-list">
<template>
<div class="card">
<div class="form">
<paper-input label="Task" value="{{todo.task}}"></paper-input>
<paper-button raised on-tap="_addTodo">Add Todo</paper-button>
</div>
<template is="dom-repeat" items="{{todos}}">
<paper-card class="todos">
<paper-checkbox id="checkTodo" on-click="_completeTodo"></paper-checkbox>
<p>{{item.task}}</p>
<iron-icon icon="delete" on-tap="_destroyAction"></iron-icon>
</paper-card>
</template>
</div>
</template>
<script>
Polymer({
is: 'my-todo-list',
properties: {
todo: {
type: Object,
value: function() {
return {};
}
},
todos: {
type: Array,
value: function() {
return [];
}
}
},
_addTodo: function() {
console.log(this.todo);
this.push('todos', this.todo);
// this.todo = {};
},
_destroyAction: function(todo) {
var index = this.todos.indexOf(todo);
this.splice('todos', index, 1);
},
});
</script>
</dom-module>
The first issue is that you always insert the same reference to the object
this.todo
in your_addTodo()
method. Instead you should make a copy of the object. You sould also add an ID to differentiate it from the other items.Then you sould add the same ID in the HTML template:
Now you can modify the
_destroyAction()
method to find the right element in the array, usingArray.findIndex()
method andEvent.target
property: