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

时间:2018-02-19 17:17:41

标签: polymer polymer-2.x dom-repeat

我正在尝试将值传递给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'来设置初始下拉值?

1 个答案:

答案 0 :(得分:1)

假设methodmethods中所需的选择,您可以修改add-item事件的事件处理程序以选择相应的索引。诀窍是等待下一个渲染帧(使用Delivery receipts),此时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;
  });
}

Polymer.RenderStatus.afterNextRender()