Polymer 1.0 数组拼接正在删除数组中的错误项目答案

【问题标题】：Polymer 1.0 array splice is deleting the wrong item in arrayPolymer 1.0 数组拼接正在删除数组中的错误项目
【发布时间】：2016-12-30 15:08:44
【问题描述】：

我正在尝试在 Polymer 中创建一个简单的待办事项列表，并且我的添加部分正在工作。当我单击项目旁边的“删除”图标时，它会删除最近添加的项目，而不是应该删除的项目。看起来它得到了错误的数组索引，我不知道如何修复它？谢谢！

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

【问题讨论】：

在您的 _destroyAction() 回调中，todo 参数是一个事件对象，而不是您要删除的 todo 对象。
我应该怎么写才能让它成为我要删除的对象？ this.todo?

标签： javascript arrays polymer splice html5-template

【解决方案1】：

第一个问题是您总是在 _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);
  }

【讨论】：

非常感谢！这正是我需要的:)

【解决方案2】：

Array.prototype.indexOf 不适用于查找对象。您可以使用 lodash 或 Array.prototype.find 之类的实用程序库。但并非所有浏览器都支持它，因此请确保包含一个 polyfill。 find in lodash 和 native 都将回调函数作为参数。

【讨论】：