Search code examples
polymerpolymer-1.0paper-elements

Polymer 1.x: paper-menu

I want to observe the selected items in a paper-menu.

I expect to see a list of selected items. Instead, I see white space in the document and undefined in the console.

Recreate the problem with the following steps:

  1. Open this jsBin
  2. Select one, two or three items.
  3. ❌ Observe the space above the PRINT TO CONSOLE button does not display the list of selected items.
  4. Click the button labeled PRINT TO CONSOLE
  5. ❌ Observe the console logs: "selected" undefined
http://jsbin.com/xukegadata/edit?html,console,output 
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-selector/iron-selector.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    iron-selector > * {
      padding: 8px;
    }
    .iron-selected {
      background-color: blue;
      color: white;
    }
  </style>

  <template is="dom-repeat" items="{{selected}}">
    <div>[[item]]</div>
  </template>

  <br /><br /><br />
  <paper-button on-tap="_show">
    Print to Console
  </paper-button>
  <br /><br />

  <paper-menu multi
              selected="{{selected}}"
              xselected="{{selected}}"
              xselectedItems="{{selected}}"
              xselectedValues="{{selected}}"
              >
    <paper-item>Foo</paper-item>
    <paper-item>Bar</paper-item>
    <paper-item>Baz</paper-item>
    <paper-item>Qux</paper-item>
    <paper-item>Quux</paper-item>
  </paper-menu>


</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        selected: {
          type: Array,
          notify: true,
        }
      },
      _show: function() {
        console.log('selected', this.selected);
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>
Solution

  • When using multi use selectedValues or selectedItems instead of selected. Remember when referring to camelCase properties as attributes, you have to use dash-case (selected-values for selectedValues).

    <!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="paper-button/paper-button.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

<x-element></x-element>

<dom-module id="x-element">
<template>
  <style>
    iron-selector > * {
      padding: 8px;
    }
    .iron-selected {
      background-color: blue;
      color: white;
    }
  </style>
  <paper-button raised on-tap="_show">Print to Console</paper-button>
  <br><br>
  <paper-menu multi selected-values="{{selected}}">
    <paper-item>Foo</paper-item>
    <paper-item>Bar</paper-item>
    <paper-item>Baz</paper-item>
    <paper-item>Qux</paper-item>
    <paper-item>Quux</paper-item>
  </paper-menu>
  <br><br>
  <template is="dom-repeat" items="{{selected}}">
    <div>[[item]]</div>
  </template>
</template>
<script>
  Polymer({
    is: "x-element",
    _show: function() {
      console.log('selected', this.selected);
    }
  });
</script>
</dom-module>
</body>