別の値を選択した場合、ペーパードロップダウンメニューが表示される

Question

paper-dropdown-menuは、特定の値が別のpaper-dropdown-menuで選択されている場合にのみ表示しようとしています。

私はselectedValueというプロパティを使用して、dom-ifテンプレートのif属性に選択した値をバインドしています。

<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> 

問題は2番目ですpaper-dropdown-menuは表示されません。

Answer 1

計算されたバインディングは依存関係がないため、を初期化すると、が呼び出されます。 selectedValueは、最初はundefinedです。_view()はfalseを返し、dom-ifの内容を非表示にします。結合への引数として変数を指定してください、と再評価selectedValue計算結合を引き起こすことが

：

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

はまた（selectedValueがバインドされている）<paper-listbox>.selectedがによってnumberであることに注意してくださいデフォルト（選択した項目のすなわち、インデックス）ので、この式は常にfalseに評価されます。

selectedValue === "1" 

私はからリテラルの切り替えをお勧めしますnumberへ：

selectedValue === 1 

ので、_view関数は次のようになります。

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

demo