Как передать выпадающее значение в 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', чтобы установить начальное значение раскрывающегося списка?


polymer polymer-2.x dom-repeat
person Matthew    schedule 19.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Предполагая, что method является желаемым выбором из methods, вы можете изменить свой обработчик событий для события add-item, чтобы выбрать соответствующий индекс. Хитрость заключается в том, чтобы дождаться следующего кадра рендеринга (используя Polymer.RenderStatus.afterNextRender()< /a>), после чего 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;
  });
}

демонстрация

person tony19    schedule 20.02.2018