Question

我在尝试更新我内部数组的值时遇到了问题。自从过去4个小时以来我一直在google上搜索，但没有运气我有以下代码：

<!--
@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="Date" value="{{todo.due}}"></vaadin-date-picker>
      <paper-button raised on-tap="_addToDo">Add</paper-button>
      </div>
<br>
      <vaadin-grid id="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">Date</template>
      <template>{{item.due}}</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
        <template>
          <div style="display: flex; justify-content: flex-end;">
            <paper-button raised on-tap="_remove">remove</paper-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(e) {
        var index = this.todos.indexOf(e.model.item);
          this.todos.splice(index, 1);
          this.$.grid.clearCache();
      };


    }


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

  </script>
</dom-module>

我在删除其中一个项目后尝试更新localStorage。我不知道如何提交更新＆＃34;。删除项目后有没有办法更新localStorage？谢谢！

Answer 1

如果使用本机方法（如Array.prototype.splice）操作数组，则必须在事后通知Polymer。因此，您可以使用notifySplices进行通知。有关notifySplices的更多信息。

或者，使用Polymer方法进行数组突变。

每个Polymer元素都有以下可用的数组变异方法：

push(path, item1, [..., itemN]) 
pop(path) 
unshift(path, item1, [...,
itemN])
shift(path)
splice(path, index, removeCount, [item1, ..., itemN])

如果您使用的是聚合物阵列突变方法，则无需通知。因此，使用this.splice('todos', index, 1)代替this.todos.splice(index, 1);，这将通知数组todos中所做的更改，这些更改也会反映localstorage中的更改。

Polymer - app-storage：删除条目和更新存储

1 个答案: