Polymer 2.0 iron-localstorage two arrays

Question

I'm trying to make a shopping cart in polymer And I do not have much knowledge How do I insert a selected data in template dom-repeat to an array binding to iron localsotage e.model.item it does not work.

<dom-module id="shop-cart">
<template>
<iron-ajax url="list.json" last-response="{{ListProducts}}" auto>
</iron-ajax>

  <template is="dom-repeat" items="{{ListProducts}}">
     <p style="display:block;width:400px">
        <span>{{item.code}}</span>
        <span>{{item.title}}</span>
        <paper-button raised class="indigo" on-
        click="addProduct">Add</paper-button>
        <br/>
     </p>  

  </template>



 <iron-localstorage name="my-app-storage"
    value="{{Orders}}"
    on-iron-localstorage-load-empty="initializeDefaultOrders"
  ></iron-localstorage>


  <template is="dom-repeat" items="Orders" as="order">
      <div>
        <p>{{order.code}}</p>
        <p>{{order.title}}</p>
      </div> 
  </template>


</template>   

<script>
    class ShopCart extends Polymer.Element {
        static get is() {
            return 'shop-cart';
        }
        static get properties() {
            return {
                Product: {
                    type: String
                         },

                Orders: {
                        type: Array,
                        value() {
                            return [
                                {
                                code:'',
                                title:'',
                                }
                            ];
                        },
                        },
                ListProducts: {
                        type: Array,
                        value() {
                            return [];
                        },
                   }

            }
        }


        initializeDefaultOrders() {
              this.Orders = {
                code:'',
                title:''
              }
           };

        addProduct(e) {  
              this.Product= e.model.item.title;
              this.push('Orders',this.Product);
              this.set('Product','');


        }

        deleteProduct(e) {
            this.splice('Orders', e.model.index, 1);
        }

    }


    window.customElements.define(ShopCart.is, ShopCart);
    </script>
</dom-module>
<shop-cart></shop-cart>

Tip: Use on-tap rather than on-click for an event that fires consistently across both touch (mobile) and click (desktop) devices. - https://www.polymer-project.org/2.0/docs/devguide/events#annotated-listeners — Frank R., Jun 14 '17 at 04:01
Related, https://stackoverflow.com/questions/31441401/polymer-1-0-is-there-a-way-to-pass-an-argument-to-a-polymer-function-from-an-at — Frank R., Jun 14 '17 at 06:17

Frank R. · Accepted Answer · 2017-06-15T12:24:54.993

The value passed to your method, addProduct(e), has nothing to do with the data model of the item of ListProducts.

Here is an example of shopping cart that binds the selection (a checkbox being checked) to a property of the item, item.selected.

https://github.com/renfeng/android-repository/blob/master/elements/android-sdk-manager.html#L267-L297

If checkboxes are not desirable, you can add a custom attribute to your button. e.g. selected

The following works only for Polymer 1.

<paper-button raised class="indigo" on-click="addProduct" selected="[[item.title]]">Add</paper-button>

And, have the following line to retrieve the title of the item selected.

this.Product= e.target.getAttribute("selected");

For Polymer 2, here is your fix.

https://github.com/renfeng/stackoverflow-question-44534326/commit/b2a4226bd5a1f5da7fa2d5a8819c53c65df7c412

Custom attribute has been proposed for Polymer 2, but not seem to be accepted for this moment. See https://github.com/Polymer/polymer/issues/4457

I made the changes in the code but it returns null value `this.Product= e.target.getAttribute("selected"); console.log(this.Product)` Also are several values that I need to get as code, title, price — Lorenzo Wagner, Jun 14 '17 at 19:58

Polymer 2.0 iron-localstorage two arrays

1 Answers1

The following works only for Polymer 1.

For Polymer 2, here is your fix.