Question

After try and read everything about, I really can't to pass the value of a form that contents a paper-listbox. The code I have is this:

        <paper-dropdown-menu label="Location" name="page_parent" class="md" selected-item-label="{{selected}}">
            <paper-listbox class="dropdown-content">
                <paper-item value="1">First choice</paper-item>
                <paper-item value="2">Second choice</paper-item>
                <paper-item value="3">Third choice</paper-item>
            </paper-listbox>
        </paper-dropdown-menu>
        <input is="iron-input" name="title" type="hidden" value$="[[selected]]">

The content of $title value is empty.

Answer 1

根据https://www.polymer-project.org/1.0/docs/devguide/data-binding.html：

数据绑定将自定义元素（主机元素）的属性或子属性绑定到其本地DOM（子元素或目标元素）中元素的属性或属性。

这意味着输入将无法看到纸张下拉菜单的属性，因为：

纸张下拉菜单不是输入的父级
纸张下拉菜单和输入不会共享父级

要解决此问题，您可以创建一个新的自定义元素，以便两者共享一个父元素：

<body>
  <dom-module id="my-element">
    <template>
      <paper-dropdown-menu label="Location" name="page_parent" class="md">
        <paper-listbox class="dropdown-content" selected="{{myChoice}}">
          <paper-item>First choice</paper-item>
          <paper-item>Second choice</paper-item>
          <paper-item>Third choice</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>

      <input is="iron-input" bind-value="[[myChoice]]">
    </template>

    <script>
      Polymer({
        is: 'my-element'
      });
    </script>
  </dom-module>


  <my-element></my-element>
</body>

纸张下拉菜单也没有选择项目标签属性

Answer 2

不确定MrK在谈论什么，但你应该能够这样做：

    <paper-dropdown-menu label="Location" name="page_parent" class="md">
        <paper-listbox class="dropdown-content" selected={{mySelection}}>
            <paper-item value="1">First choice</paper-item>
            <paper-item value="2">Second choice</paper-item>
            <paper-item value="3">Third choice</paper-item>
        </paper-listbox>
    </paper-dropdown-menu>
    <input is="iron-input" name="title" type="hidden" value$="[[mySelection]]">

不要忘记宣布你的财产：

mySelection: {
   type: Number,
   value: 0,
   notify: true
}

现在paper-dropdown-menu将默认为First choice，每当您更改时，该值都会反映到mySelection属性，而iron-input属性会更改{{1}} }。

Get polymer paper-list selected item value in a form

2 个答案: