如何使用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;

}