如何使用Polymer设置下拉菜单的值

Question

我正在尝试在Polymer中设置paper-dropdown-menu的值，但遇到了问题。

paper-item值与它的innerHTML不匹配，因此当尝试使用Javascript设置它时，它显示一个数字而不是一个名称。

下面的代码通过id正确设置了项目，但我想改为通过名称设置：

<paper-dropdown-menu id="contact">
  <paper-listbox id="contactList"
    attr-for-selected="value"
    slot="dropdown-content">
    <template is="dom-repeat" items="[[contacts]]">
      <paper-item value$="[[item.idContact]]">[[item.nameContact]]</paper-item>
    </template>
  </paper-listbox>
</paper-dropdown-menu>

...

_updateDom() {
  let cart = localStorage.getItem('idContact');
  this.$.contact.value = cart.idContact;
}

如何设置dropdown/listbox/item以显示显示名称？

Answer 1

将id赋予paper-item ，而不是value

<paper-item id$="[[item.idContact]]">[[item.nameContact]]</paper-item>

并使用以下命令调用该商品：

_updateDom() {
  // If you have saved the object to localStorage, you may only save as String. 
  // So need to return to Object with `JSON.parse`. 
  // And you need to save object to localStorage with JSON.stringify(obj);
  let cart = JSON.parse(localStorage.getItem('idContact'));
  this.shadowRoot.querySelector('#'+ cart.idContact).innnerHTML = cart.nameContact;

}