วิธีส่งผ่านค่าดรอปดาวน์เพื่อทำซ้ำ dom

ฉันกำลังพยายามส่งค่าไปยังเทมเพลต 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