2017-08-07 10 views
0

私はレイジーロードのポリマー2スターターキットを使用してアプリケーションを作成しました。Polymer2:ペーパードロップダウンメニューの選択イベントが発射しない

私にはpaper-dropdown-menuがあります。これにはアイテムのリストが含まれています。このリストは、iron-ajax要素によって取得されたデータを利用します。 ["Application 1", "Application 2", "Application 3"]

リストが正しく移入が、私はそのリスト内の項目のいずれかをクリックすると選択が要素自体に変更するためには表示されません:iron-ajaxを介して返さ

データは次のようになります。

selection

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> 
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="../bower_components/neon-animation/web-animations.html"> 
<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../bower_components/paper-item/paper-item.html"> 

<link rel="import" href="shared-styles.html"> 

<dom-module id="my-kc"> 
    <template> 
     <style include="shared-styles"> 
      :host { 
       display: block; 
       padding: 10px; 
      } 

      ul { 
       list-style: none; 
       padding-left: 0; 
      } 
     </style> 

     <iron-ajax id="dbQueryIA" 
        auto 
        url="SOME URL HERE" 
        content-type="application/x-www-form-urlencoded" 
        method="POST" 
        body="[[params]]" 
        on-response="handleResponse" 
        last-response="{{response}}" 
        on-error="_confirmError"> 
     </iron-ajax> 

     <div class="card"> 
      <p>Application: [[application]]</p> 
      <p>Selected Item: [[selectedItem]]</p> 
      <p>Selected Value: [[selectedValue]]</p> 
      <paper-dropdown-menu id="applications" label="Application" placeholder="Select An Application" selected-item="[[selected]]" value="[[selectedValue]]"> 
       <paper-listbox slot="dropdown-content" selected="{{application}}"> 
       <template is="dom-repeat" items="[[response]]"> 
        <paper-item value="[[item]]">[[item]]</paper-item> 
       </template> 
       </paper-listbox> 
      </paper-dropdown-menu> 
     </div> 
    </template> 

    <script> 
    class MyKc extends Polymer.Element { 
     static get is() { return 'my-kc'; } 
     static get properties() { 
     return { 
      params: { 
      type : Object, 
        value : { 
       // table: 'EAMS', 
       // category: 'Admin', 
       // tool: 'EAMS', 
       tools: true 
       //sub_category: 'Access', 
       // issue: 'Account Register' 
        } 
      }, 
      body  : Object, 
      response : Object, 
      selections : { 
      type: Object, 
      value: function() { return {}; } 
      }, 
      application: { 
      type: String, 
      value: "1" 
      }, 
      selectedItem: { 
      type: String, 
      value: "" 
      }, 
      selectedValue: { 
      type: String, 
      value: "" 
      }, 
     }; 
     } 

     static get observers() { 
     return [ 
      '_selectionChanged(selections.*)' 
     ]; 
     } 

     _appChanged(data) { 
     debugger; 
     } 

     handleResponse(res) { 
     this.response = this.response.sort(); 
     } 

     _confirmError(err) { 
      console.error(err); 
     } 

     _selectionChanged(selection) { 
     let value; 

     if (selection === 'application') { 
      value = this.selections.application ? selection.application : 'Select an application'; 
     } 
     console.log(value); 
     return value; 
     } 
    } 

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

答えて

関連する問題