polymer - 根据纸张标签选择添加/删除铁选择类

Question

我已经开始学习 Polymer 和 lit-element 并且正在研究活动和非活动状态网格，我在其中使用了带有铁页的纸质标签。

问题：当我在 之间切换时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

与 Polymer 不同，lit-html 没有双向数据绑定机制，因此您必须注意更新事件currentPage中的属性：selected-changed

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>
  `;
}