Polymer and app-storage: Remove entry button

Question

I ran into a problem with polymer and app-storage when trying to remove an entry. I'm trying to add a button to the Vaading Grid that will delete the entry on which the button is set. The only thing is that I cannot seem to make it work, when I click the button, even console.log doesn't work. What am I doing wrong here?

Here is the code:

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

So the _addToDo button is working, but not the _remove button. When I open the console, this is empty.

Please let me know what am I doing wrong here. Thank you!

Answer 1

Since button is native HTML Element on-tap will not work.

Change it to polymer element like paper-button or change on-tap to onclick.