如何将下拉值传递给 dom-repeat

Question

我试图将一个值传递给 dom-repeat 模板，但行为默认为数组中的第一项。我正在尝试从字符串数组中设置一个字符串。

父组件

<select value="[[entry.method]]"
  on-change="_changeMethod">
  <template is="dom-repeat" items="[[entry.methods]]">
    <option value="[[item]]">[[item]]</option>
  </template>
</select>

子组件

this.dispatchEvent(new CustomEvent('add-item', {
  bubbles: true,
  composed: true,
  detail: {
    method: 'b',
    methods: ['a', 'b', 'c']
  }));

下拉列表默认为 'a'

如何传入'b'来设置初始下拉值？

Answer 1

假设 method 是来自 methods 的所需 selection，您可以将 add-item 事件的事件处理程序修改为 select 相应的索引.诀窍是等待下一个渲染帧（使用 Polymer.RenderStatus.afterNextRender()），此时 DOM 已更新为新条目。

addItem(e) {
  const entry = e.detail;
  const selectedIndex = entry.methods.indexOf(entry.method);
  this.entry = entry;

  Polymer.RenderStatus.afterNextRender(this, () => {
    this.$.mySelect.selectedIndex = selectedIndex;
  });
}

demo

如何将下拉值传递给 dom-repeat

How to Pass in Dropdown Value to dom-repeat

polymer

polymer-2.x

dom-repeat