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。

聚合物和应用程序存储：删除输入按钮

1 个答案: