Question

我在使用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

我做错了什么？有什么建议吗？

Answer 1

你正在做的事情很艰难，但我不会因为文件错误而责备你。有一种更简单的方法 - 更多遵循聚合物思维 - 来控制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

Iron-collapse向控制台抛出错误

1 个答案: