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

Question

我正在尝试添加 paper-tabs我的 Polymer 2.0 应用程序的自定义元素。

我在更改元素的属性时遇到问题。我希望选择第一个选项卡，因此我尝试使用 this property 来完成此操作

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

我做错了什么？

代码

   <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

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

但是您必须删除静态属性 block 之后、返回 block 之后的逗号，并且您选择的属性需要具有您缺少的“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>

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

如果这对您没有帮助，您可以添加更多详细信息吗？

谢谢