基于纸张选项卡选择的添加/删除铁选择类

Question

我已经开始学习聚合物和发光元素，并在主动和非活动状态网格上工作，在那里我使用了带铁页的纸标签。

问题:当我在paper-tabs，之间切换时，iron-selected类将添加到paper-tab链接中，而不是添加到iron-pages内容中。

如何使iron-selected类与iron-pages内容一起工作？

任何解决办法都会很棒！

constructor() {
    super();
    this.currentPage = 0;
}
render() {
return html `
<div class="card">
    <paper-tabs scrollable selected=${this.currentPage}>
        <paper-tab>Tab 1</paper-tab>
        <paper-tab>Tab 2</paper-tab>
        <paper-tab>Tab 3</paper-tab>
    </paper-tabs>
    <iron-pages selected=${this.currentPage}>
        <div>some story for tab 1</div>
        <div>some story for tab 2</div>
        <div>some story for tab 3</div>
    </iron-pages>
</div>
`;
}
}

Answer 1

与聚合物不同，lit没有双向数据绑定机制，因此您必须负责更新selected-changed event中的selected-changed event属性。

render() {
  return html`
    <div class="card">
      <paper-tabs scrollable
                  selected=${this.currentPage /* This is unidirectional */}
                  @selected-changed=${e => this.currentPage = e.detail.value}>
        <paper-tab>Tab 1</paper-tab>
        <paper-tab>Tab 2</paper-tab>
        <paper-tab>Tab 3</paper-tab>
      </paper-tabs>
      <iron-pages selected=${this.currentPage}>
        <div>some story for tab 1</div>
        <div>some story for tab 2</div>
        <div>some story for tab 3</div>
      </iron-pages>
    </div>
  `;
}