Question

我只是在另一个paper-dropdown-menu中选择了特定值时才会显示paper-dropdown-menu。

我正在使用名为selectedValue的属性将所选值绑定到if模板中的dom-if属性。

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">

<dom-module id="my-element">
    <template>
        <paper-dropdown-menu label="One" no-animations>
            <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{selectedValue}}">
                <template is="dom-repeat" items="[[options1]]">
                    <paper-item>[[item]]</paper-item>
                </template>
            </paper-listbox>
        </paper-dropdown-menu>

        <template is="dom-if" if="[[_view()]]">
            <paper-dropdown-menu label="Two" no-animations>
                <paper-listbox slot="dropdown-content" class="dropdown-content">
                    <template is="dom-repeat" items="[[options2]]">
                        <paper-item>[[item]]</paper-item>
                    </template>
                </paper-listbox>
            </paper-dropdown-menu>
        </template>
    </template>

    <script>
        /**
        * @customElement
        * @polymer
        */
        class MyElement extends Polymer.Element {
            static get is() { return 'my-element'; }

            static get properties() {
                return {
                    selectedValue : {
                        type : String
                    },
                    options1 : {
                        type: Array,
                        value: [1,2,3,4]
                    },
                    options2 : {
                        type: Array,
                        value : [5,6,7]
                    }
                };
            }

            _view() {
                return this.selectedValue === "1";
            }
        }

        window.customElements.define(MyElement.is, MyElement);
    </script>
</dom-module>

问题是第二个paper-dropdown-menu永远不会显示。

Answer 1

问题是你的计算绑定没有依赖关系，因此在初始化时调用一次。由于selectedValue最初为undefined，_view()会返回false，导致dom-if隐藏其内容。

要使计算的绑定重新评估selectedValue，请确保将该变量指定为绑定的参数：

<template is="dom-if" if="[[_view(selectedValue)]]">...</template>

另请注意，<paper-listbox>.selected（绑定到selectedValue）默认为number（即所选项目的索引），因此此表达式始终求值为{{ 1}}：

false

我建议将文字从selectedValue === "1"切换为string：

number

因此，selectedValue === 1函数应如下所示：

_view

demo

在另一个中选择值时显示纸张下拉菜单

1 个答案: