0
私はレイジーロードのポリマー2スターターキットを使用してアプリケーションを作成しました。Polymer2:ペーパードロップダウンメニューの選択イベントが発射しない
私にはpaper-dropdown-menu
があります。これにはアイテムのリストが含まれています。このリストは、iron-ajax
要素によって取得されたデータを利用します。 ["Application 1", "Application 2", "Application 3"]
リストが正しく移入が、私はそのリスト内の項目のいずれかをクリックすると選択が要素自体に変更するためには表示されません:iron-ajax
を介して返さ
データは次のようになります。
<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>