CODEWITHSUNDEEP
polymerpolymer-2.x
Amparo
Amparo

Reputation: 824

Showing paper-dropdown-menu when selected value in another

I am trying to show a paper-dropdown-menu only when a specific value is selected in another paper-dropdown-menu.

I am using a property called selectedValue to bind selected value to the if attribute in a dom-if template.

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">

<dom-module id="my-element">
    <template>
        <paper-dropdown-menu label="One" no-animations>
            <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{selectedValue}}">
                <template is="dom-repeat" items="[[options1]]">
                    <paper-item>[[item]]</paper-item>
                </template>
            </paper-listbox>
        </paper-dropdown-menu>

        <template is="dom-if" if="[[_view()]]">
            <paper-dropdown-menu label="Two" no-animations>
                <paper-listbox slot="dropdown-content" class="dropdown-content">
                    <template is="dom-repeat" items="[[options2]]">
                        <paper-item>[[item]]</paper-item>
                    </template>
                </paper-listbox>
            </paper-dropdown-menu>
        </template>
    </template>

    <script>
        /**
        * @customElement
        * @polymer
        */
        class MyElement extends Polymer.Element {
            static get is() { return 'my-element'; }

            static get properties() {
                return {
                    selectedValue : {
                        type : String
                    },
                    options1 : {
                        type: Array,
                        value: [1,2,3,4]
                    },
                    options2 : {
                        type: Array,
                        value : [5,6,7]
                    }
                };
            }

            _view() {
                return this.selectedValue === "1";
            }
        }

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

The problem is the second paper-dropdown-menu is never displayed.

Upvotes: 1

Views: 744

Answers (1)

tony19
tony19

Reputation: 138276

The problem is your computed binding has no dependencies, so it's invoked once at initialization. Since selectedValue is initially undefined, _view() returns false, causing the dom-if to hide its contents.

To cause the computed binding to re-evaluate selectedValue, make sure to specify the variable as an argument to the binding:

<template is="dom-if" if="[[_view(selectedValue)]]">...</template>

Also note that <paper-listbox>.selected (to which selectedValue is bound) is a number by default (i.e., the index of the selected item), so this expression always evaluates to false:

selectedValue === "1"

I recommend switching the literal from a string to a number:

selectedValue === 1

So, the _view function should look like this:

_view(selectedValue) {
  return selectedValue === 1;
}

demo

Upvotes: 1

Related Questions