聚合物1.0陣列拼接被刪除了錯誤的項目在陣列

我試圖創建一個簡單的做高分子列表，和我有附加部分的工作。當我點擊旁邊的「刪除」圖標的項目，它刪除最近添加的項目，而不是它應該刪除的。它看起來像它得到數組的索引錯誤，我不知道如何解決它？謝謝！聚合物1.0陣列拼接被刪除了錯誤的項目在陣列

<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>

來源

2016-12-30 Lindsey S

在您的_destroyAction（）回調中，todo參數是一個事件對象，而不是您想要刪除的todo對象。 – Supersharp

我應該怎麼寫，以便它是我想要刪除的對象嗎？ this.todo？ –

第一個問題是您總是在您的_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()方法查找數組中的右元素，採用Array.findIndex()方法和Event.target屬性：

_destroyAction: function(ev) { 
    var index = this.todos.findIndex(function(item) { 
     return item.id == ev.target.parentElement.id 
    }); 
    this.splice('todos', index, 1); 
    }

來源

2016-12-31 18:30:02 Supersharp

非常感謝你！這正是我需要的:) –

@LindseyS可以給予好評，如果它幫助;-) – Supersharp

Array.prototype.indexOf不用於查找對象。您可以使用一個實用程序庫像lodash或Array.prototype.find。儘管它在所有瀏覽器中都不支持，所以請確保包含polyfill。兩者都可以在lodash中找到，而本機以回調函數作爲參數。

來源

2016-12-30 16:00:42 demux

聚合物1.0陣列拼接被刪除了錯誤的項目在陣列

回答

相關問題