聚合物和应用程序存储：删除条目按钮

Question

尝试删除条目时，遇到聚合物和应用程序存储问题。 我正在尝试向Vaading Grid添加一个按钮，该按钮将删除设置按钮的条目。 唯一的是我似乎无法使它工作，当我点击按钮，甚至console.log不起作用。我在这里做错了什么？

下面是代码：

<!-- 
@license 
Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 
Code distributed by Google as part of the polymer project is also 
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 
--> 

<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="shared-styles.html"> 
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> 
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html"> 
<link rel="import" href="../bower_components/paper-input/paper-input.html"> 
<link rel="import" href="../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../bower_components/app-storage/app-localstorage/app-localstorage-document.html"> 






<dom-module id="my-view1"> 
    <template> 
    <style include="shared-styles"> 
     :host { 
     display: block; 

     padding: 10px; 
     } 
     .form { 
     display: flex; 
     flex-direction: column; 
     } 
     .form paper-input { 
     flex: 1; 
     margin-right: 10px; 
     } 
     .form vaadin-date-picker { 
     flex: 1; 
     margin-top: 10px; 

     } 
     .form paper-button { 
     margin-top: 10px; 
     align-self: flex-end; 
     } 

    </style> 
    <div class="card"> 
     <div class="form"> 
     <paper-input label="Sum" value="{{todo.task}}" auto-validate placeholder="Suma" required=true pattern="[0-9]*" error-message="Numbers only"></paper-input> 
     <vaadin-date-picker label="When" value="{{todo.due}}"></vaadin-date-picker> 
     <paper-button raised on-tap="_addToDo">Add</paper-button> 
     </div> 
<br> 
     <vaadin-grid items={{todos}}> 

     <vaadin-grid-column width="calc(50% - 100px)"> 
      <template class="header">Sum</template> 
      <template>{{item.task}}</template> 
     </vaadin-grid-column> 

    <vaadin-grid-column width="calc(50% - 100px)"> 
     <template class="header">When</template> 
     <template>{{item.due}}</template> 
    </vaadin-grid-column> 

    <vaadin-grid-column> 
     <template> 
      <div style="display: flex; justify-content: flex-end;"> 
      <button on-tap="_remove">Remove</button> 
      </div> 
     </template> 
     </vaadin-grid-column> 

    </vaadin-grid> 
    </div> 
<app-localstorage-document key="todos" data="{{todos}}"> 
</app-localstorage-document> 
    </template> 



    <script> 
    class MyView1 extends Polymer.Element { 
     static get is() { return 'my-view1'; } 

     static get properties() { 
     return { 
      todo: { 
      type: Object, 
      value:() => { return {} } 
      }, 
      todos: { 
      type: Array, 
      value:() => [] 
      } 
     }; 
     } 

     _addToDo() { 
     this.push('todos', this.todo); 
     this.todo = {}; 
     }; 

     _remove() { 
     console.log("Clicked!"); 
     }; 


    } 


    window.customElements.define(MyView1.is, MyView1); 

    </script> 
</dom-module> 

所以_addToDo按钮工作，但不是_remove按钮。当我打开控制台时，这是空的。

请让我知道我在这里做错了什么。谢谢！

Answer 1

由于button是原生HTML元素on-tap将不起作用。

将其更改为像paper-button这样的聚合物元素或将on-tap更改为onclick。