How can I dynamically add items into paper-dropdown-menu?

3
votes

I tried adding it with like dropdownMenu.appendChild(menuItem) but as I expected this doesn't work. I couldn't find information about this on Polymer's guides nor other similar questions on here.

Is that possible? If so, how?

paper-dropdown-menu: https://elements.polymer-project.org/elements/paper-dropdown-menu

2
javascriptpolymerpolymer-1.0

2 Answers

6
votes

In Polymer, recommended way of manipulating the DOM is by manipulating the data:

  • put the list of menu items in array: var items_array = [....];

-create the menu as:

<paper-dropdown-menu label="Your favourite pastry">
  <paper-listbox class="dropdown-content">
    <template is="dom-repeat" items="{{items_array}}">
      <paper-item>{{item}}</paper-item>
    </template>
  </paper-listbox>
</paper-dropdown-menu>
  • adding and removing elements in items_array will affect the menu immediately.
-1
votes

Found out the proper way from their docs:

Should select the Polymer element with: Polymer.dom(parent).querySelector(selector)

And append with: Polymer.dom(parent).appendChild(node)