我在使用iron-collapse
时遇到问题。当我使用它时会向控制台抛出错误。我不知道。
以下是我的模板结构示例:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
<dom-module id="page-faq">
<template>
<header-layout id="header"></header-layout>
<bread-crumb id="bread-crumb"></bread-crumb>
<div class="wrapper">
<div id="faq-container">
<div id="tabs">
</div>
<template is="dom-repeat" items="[[items]]">
<div class="collapse-container">
<button on-click="toggle">[[item.content.title]]</button>
<iron-collapse id="collapse">
<div class="collapse-content">
[[item.answer]]
</div>
</iron-collapse>
</div>
</template>
</div>
</div>
<footer-layout id="footer"></footer-layout>
</template>
<script type="text/javascript">
class PageFaq extends Polymer.Element {
static get is() {
return 'page-faq'
}
toggle() {
this.$.collapse.toggle();
this.$.button.setAttribute('aria-expanded', this.$.collapse.opened);
};
}
customElements.define(PageFaq.is, PageFaq);
</script>
</dom-module>
当我点击按钮时它会给我
TypeError: Cannot read property 'toggle' of undefined
我做错了什么?有什么建议吗?
答案 0 :(得分:0)
你正在做的事情很艰难,但我不会因为文件错误而责备你。有一种更简单的方法 - 更多遵循聚合物思维 - 来控制iron-collapse
,以及使用变量。在这种情况下,我将其命名为ironCollapsableOpened
。
<button on-click="toggle">[[item.content.title]]</button>
<iron-collapse opened="[[ironCollapseOpened]]">
<div class="collapse-content">
[[item.answer]]
</div>
</iron-collapse>
toggle() {
this.set('ironCollapseOpened', !this.ironCollapseOpened);
};
铁塌陷创造了一个可折叠的内容块。默认情况下 内容将被折叠。使用open或toggle()来显示/隐藏 内容。
https://www.webcomponents.org/element/PolymerElements/iron-collapse