Showing paper-dropdown-menu when selected value in another - polymer

Question

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.

Answer 1

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