设置选定的纸张标签

Posted 2023-03-29

【中文标题】设置选定的纸张标签

【英文标题】：Set selected of Paper-Tabs

【发布时间】：2015-07-07 09:48:07

【问题描述】：

我正在尝试根据data-id 属性选择paper-tab。我有元素，但无法更改为inner_tabview 的selected 属性。

我有一个聚合物：

<paper-tabs id="inner_tabview" noink="true">
    <template repeat="item in tabNames">
        <paper-tab data-id="item['id']"><h3>item['name']</h3></paper-tab>
    </template>
</paper-tabs>

以及它背后的一些 Dart 代码：

selectTab(itemId)      
    PaperTab item = shadowRoot.querySelector("paper-tab[data-id='" + itemId + "']");
    print('Selecting: ' + itemId + ', text:' + item.text);

    PaperTabs tabView = shadowRoot.querySelector('#inner_tabview');
    tabView.selected = item; // This doesn't work

使用整数（索引）更改所选内容是可行的，但我不知道索引应该是什么。

我目前唯一能想到的就是找到所有paper-tab 元素并在该List 中获取正确元素的索引。但这听起来有点傻。

还有其他方法吗？

【问题讨论】：

您是否在 Chrome 开发工具中检查了 data-id 属性实际上已分配了值？

【参考方案1】：

我不知道为什么 querySelector 不起作用，但 selected 默认需要索引而不是元素。

如果您指定valueattr 属性，则可以使用索引以外的其他属性。

<paper-tabs id="inner_tabview" noink="true" valueattr="data-id">
    <template repeat="item in tabNames">
        <paper-tab data-id="item['id']"><h3>item['name']</h3></paper-tab>
    </template>
</paper-tabs>

然后

tabView.selected = itemId;

应该也可以

【讨论】：

谢谢，不知道valueattr

querySelector 工作，但我无法更改选定的属性。

很难用可用的信息来判断。可以通过 GitHub 分享一个示例项目吗？