Multiple Paper-Dialog Отображение одинакового содержимого во вложенном dom-repeat

Question

Я хочу создать несколько кнопок, каждая из которых имеет свой собственный диалог с отображаемым содержимым. Если я достану элемент бумаги-диалога, содержимое будет отображаться правильно. Однако после добавления элемента paper-dialog, когда я нажимаю на кнопку, все диалоги отображают одинаковое содержимое.

Нужно ли вводить каждый отдельный объект "я" в бумажный диалог? Я не видел возможности сделать это в документах.

<template is="dom-repeat" items="[[forms]]" as="self">
  <section onclick="clickHandler(event)">
    <paper-button data-dialog="animated">[[self.period]] [[self.type]]-Evaluation for [[self.name]]</paper-button>
    <paper-dialog id="animated" exit-animation="fade-out-animation"
                  with-backdrop>
      <template is="dom-repeat" items="[[self.questions]]" as="question">
        <div class="row">
          <b>Question [[questionNumber(index)]]: </b>[[question.question]] <br>
        </div>
        <div>
          <b>Answer:</b> <span>[[question.answer]]</span><br>
        </div>
      </template>
    </paper-dialog>
  </section>
</template>


function clickHandler(e) {
  var button = e.target;
  while (!button.hasAttribute('data-dialog') && button !== document.body) {
    button = button.parentElement;
  }
  if (!button.hasAttribute('data-dialog')) {
    return;
  }
  var id = button.getAttribute('data-dialog');
  var dialog = document.getElementById(id);
  if (dialog) {
    dialog.open();
  }
}

Answer 1

Попробуйте дать разные идентификаторы для каждого диалога. Вы можете использовать что-то вроде id="animated{{index}}" где index это значение индекса от dom-repeat.