如何在Polymer 2.0中更改自定义元素的属性？

Question

我正在尝试向我的Polymer 2.0应用添加纸制标签自定义元素。

我在更改元素的属性时遇到麻烦。 我希望选择第一个标签，所以我正在尝试使用此属性

但是，当我添加该“静态获取属性”脚本时，该元素刚刚从页面中消失了。

我究竟做错了什么？

码

   <paper-tabs selected="{{selected}}">
      <paper-tab>tab1</paper-tab>
      <paper-tab>tab2</paper-tab>
      <paper-tab>tab3</paper-tab>
    </paper-tabs>

    <iron-pages selected="{{selected}}">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </iron-pages>

---

    class MyTabs extends Polymer.Element {
      static get is() { return 'my-tabs'; },

      static get properties() {
        return {
          selected: {
            value: 0,
          }, 
        },
      },
    }

Answer 1

我不知道可以在哪里创建您的问题。

但是您必须在静态属性块之后，返回块和您选择的属性之后必须删除缺少的“ type”属性，然后删除逗号。

下面是我创建的有效的测试元素：

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">

<dom-module id="os-test">
    <template>
        <paper-tabs id="tabs" selected="{{tabSelected}}">
            <paper-tab>Tab 1</paper-tab>
            <paper-tab>Tab 2</paper-tab>
            <paper-tab>Tab 3</paper-tab>
        </paper-tabs>

        <iron-pages selected="{{tabSelected}}">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </iron-pages>
    </template>
    <script>
        class OsTestElement extends Polymer.Element {
            static get is() {
                return 'os-test';
            }

            static get properties() {
                return {
                    tabSelected: {
                        type: Number,
                        value: 0,
                        observer: "log"
                    }
                }
            }

            log(tabID) {
                console.log("selected tab : " + tabID);
            }
        }
        window.customElements.define(OsTestElement.is, OsTestElement);
    </script>
</dom-module>

每次单击选项卡时，所选属性都会更改。 您可以检查控制台以查看选择的选项卡。

如果那对您没有帮助，是否可以添加更多详细信息。

谢谢