Polymer paper-input does not update nested property

Question

Does paper-input support nested properties? For example,

<paper-input label="FIRST NAME" value="{{client.name}}"></paper-input> //client object is updated
<paper-input label="LAST NAME" value="{{client.address.street}}"></paper-input> //client object is not updated

client.name is updated when user enters text into paper-input but client.address.street is not updated when user enters text into paper-input. i.e. client object only contains {name: 'xxx} and not {name: 'xxx', address: {street: 'abc'}}

Is there any documentation out there that mentions the above limitations or did I do something wrong? Thanks!

Answer 1

Polymer doesn't provide a way to bind directly to an array item. You have to use data binding helper elements from polymer (like template repeaters) for nested scopes.

Use one of the following ways to interact with arrays in a data binding:

• The dom-repeat helper element lets you create a instance of a template for each item in an array. Inside a dom-repeat instance, you can bind to the properties of the array item.

  <dom-repeat items="{{client}}" as="client">
    <template>
      <paper-input label="FIRST NAME" value="{{client.name}}"></paper-input>
      <paper-input label="LAST NAME" value="{{client.address.street}}"></paper-input>
    </template>
  </dom-repeat>
  

• The iron-list displays a virtual, 'infinite' list. The template inside the iron-list element represents the DOM to create for each list item.

  <iron-list items="{{client}}" as="client">
    <template>
        <paper-input label="FIRST NAME" value="{{client.name}}"></paper-input>    
        <paper-input label="LAST NAME" value="{{client.address.street}}"></paper-input>
    </template>
  </iron-list>
  

If you initialize a property i.e. an object or array value using a function, it will ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element. You don't have to user helper element as above:

client: {
    type: Object,
    value: function() {
           return {
            "name": "",
            "address": {
              "street": ""
           }
          };
        }
}

Demo