使用iron-collapse点击按钮报错：Cannot read property 'toggle' of undefined

我一眼就看出问题出在哪了——你在dom-repeat循环里的元素引用方式不对，导致this.$.collapse根本找不到对应的组件，所以才会抛出Cannot read property 'toggle' of undefined的错误。

问题根源 #

1. this.$只能获取静态元素：Polymer的this.$对象只能访问模板中静态定义的元素，而dom-repeat是动态生成DOM节点的，这些动态生成的iron-collapse和按钮不在this.$的范围内，所以this.$.collapse和this.$.button都是undefined。
2. 循环中重复使用id无效：你在dom-repeat里给每个iron-collapse都设了id="collapse"，HTML里id必须是唯一的，重复的id会导致DOM选择器行为不可预期，这也是找不到元素的原因之一。

解决方法 #

我们需要通过点击事件的上下文来找到对应的iron-collapse元素，而不是依赖this.$。具体步骤如下：

1. 修改toggle方法，接收事件参数，通过事件源（点击的按钮）定位到同级的iron-collapse。
2. 移除循环内元素的重复id，改用类选择器来定位元素。
3. 更新按钮的aria-expanded属性时，直接从当前按钮和对应的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">
            <!-- 移除id，通过事件获取当前按钮 -->
            <button on-click="toggle">[[item.content.title]]</button>
            <!-- 移除重复id，改用类名 -->
            <iron-collapse class="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(e) {
        // 通过点击的按钮找到父容器，再获取里面的iron-collapse
        const button = e.currentTarget;
        const collapse = button.parentElement.querySelector('.collapse');
        
        // 切换collapse状态
        collapse.toggle();
        // 更新按钮的aria-expanded属性
        button.setAttribute('aria-expanded', collapse.opened);
      };
    }
    customElements.define(PageFaq.is, PageFaq);
  </script>
</dom-module>

额外说明 #

如果你的Polymer版本支持更便捷的DOM查询方式（比如this.shadowRoot.querySelector），也可以用它来定位，但通过事件上下文的方式最直接，因为每个按钮点击时都能精准找到自己对应的collapse组件，不会和其他循环项混淆。

内容的提问来源于stack exchange，提问作者batgerel.e