Polymer - app-storage: Remove entry and update storage

Question

I ran into a problem when trying to update the value of an array inside my . I've been searching on google since last 4 hours, but no luck I have the follwing 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="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>

I'm trying to update localStorage after removing one of the items. I have no idea how to "commit the update". Is there any way to update the localStorage after removing the item? Thanks!

Answer 1

If you manipulate an array using the native methods (like Array.prototype.splice), you must notify Polymer after the fact. So, you can notify using notifySplices. More about notifySplices.

OR, use the Polymer methods for array mutations.

Every Polymer element has the following array mutation methods available:

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

You are not required to notify if you are using Polymer array mutation method. So, use this.splice('todos', index, 1) instead of this.todos.splice(index, 1);, this will notify changes made in the array todos which will reflect changes in the localstorage as well.