How to pass an Array property as an element?

Question

I am developing to send an Array property as an element.

File form-list.html

<dom-module id="form-list">
  <template>
    <div>{{title}} - {{owner}} </div>
    <form>
      <template is="dom-repeat" items="{{inputAndLabel}}">
          <div><label>{{item.tag}} {{owner}}</label><input type="{{item.type}}" value="{{item.defaultValue}}"></div>
      </template>
    </form>
  </template>

  <script>
    Polymer({
      is: 'form-list',
      properties: {
        owner: {
          value:"Mechanical",
        },
        inputAndLabel: {
          type: Array,
          value: function() { return []; }
        }
      },
      ready: function() {
        this.title = 'Formulario: Usuario';
      }
    });
  </script>
</dom-module>

Run codeHide result

So, to use the element and pass the inputAndLabel property (this is an Array), which does not work, but the owner property works (this is a string).

<form-list inputAndLabel="[
        {defaultValue: '', type:'text', tag: 'Nombre' },
        {defaultValue: '', type:'text', tag: 'Apellido' },
        {defaultValue: '', type:'text', tag: 'Email' },
        {defaultValue: '', type:'text', tag: 'Dirección' }]" owner="Eternal">
</form-list>

How to send an array as a property of a custom element?

thank

Answer 1

According to the polymer documentation , you can pass an array as an attribute of an element to which you respect strict JSON notation.

For objects and array properties, you can pass an object or array in JSON format:

<my-element book='{ "title": "Persuasion", "author": "Austen" }'></my-element>

, JSON , .

<form-list input-and-label='[
        {"defaultValue": "", "type":"text", "tag": "Nombre" },
        {"defaultValue": "", "type":"text", "tag": "Apellido" },
        {"defaultValue": "", "type":"text", "tag": "Email" },
        {"defaultValue": "", "type":"text", "tag": "Dirección" }]'   owner="Eternal">
</form-list>

, inputAndLabel input-and-label.