多个纸质对话框 在嵌套的 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。您可以使用类似 id="animated{{index}}" 的内容，其中 index 是来自 dom-repeat 的索引值。