Javascript Polymer 1.0阵列拼接正在删除阵列中的错误项
我正在尝试用Polymer创建一个简单的待办事项列表,我的添加部分正在工作。当我单击项目旁边的“删除”图标时,它会删除最近添加的项目,而不是应该删除的项目。看起来它得到了错误的数组索引,我不知道如何修复它?谢谢Javascript Polymer 1.0阵列拼接正在删除阵列中的错误项,javascript,arrays,polymer,splice,html5-template,Javascript,Arrays,Polymer,Splice,Html5 Template,我正在尝试用Polymer创建一个简单的待办事项列表,我的添加部分正在工作。当我单击项目旁边的“删除”图标时,它会删除最近添加的项目,而不是应该删除的项目。看起来它得到了错误的数组索引,我不知道如何修复它?谢谢 <dom-module id="my-todo-list"> <template> <div class="card"> <div class="form"> <paper-input label="Task" val
<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>
添加待办事项
{{item.task}
聚合物({
是‘我的待办事项清单’,
特性:{
待办事项:{
类型:对象,
值:函数(){
返回{};
}
},
待办事项:{
类型:数组,
值:函数(){
返回[];
}
}
},
_addTodo:function(){
console.log(this.todo);
this.push('todos',this.todo);
//this.todo={};
},
_销毁操作:功能(todo){
var index=this.todos.indexOf(todo);
这个.拼接('todos',索引,1);
},
});
Array.prototype.indexOf不适用于查找对象。您可以使用lodash或Array.prototype.find等实用程序库。但并不是所有浏览器都支持它,所以请确保包含polyfill。find in lodash和本机find都将回调函数作为参数 第一个问题是,您总是在\u addTodo()
方法中插入对对象this.todo
的相同引用。相反,您应该制作对象的副本。您还应该添加一个ID以将其与其他项目区分开来
_addTodo: function() {
var copy = Object.assign({}, this.todo);
copy.id = this.push('todos', copy);
// this.todo = {};
}
然后,您应该在HTML模板中添加相同的ID:
<paper-card class="todos" id="{{item.id}}">
在_destroyAction()回调中,todo参数是一个事件对象,而不是要删除的todo对象。我应该如何编写它,使其成为我要删除的对象?这个。待办事项?非常感谢!这正是我所需要的:)
_destroyAction: function(ev) {
var index = this.todos.findIndex( function(item) {
return item.id == ev.target.parentElement.id
} );
this.splice('todos', index, 1);
}