dom 更改元素順序后，聚合物 2 鐵選擇器所選元素不會更新

Question

我有一個組件，它有 4 個實例。

用戶點擊數字 2，產品 B 被選中。

當 dom 被重新排序時，稍后在他選擇另一個選項后，組件卡磚的這 4 個實例被重新排序（因為價格變化，所以這會在流程中自動發生）一切都很好......除了事實所選元素（編號為 2 ）移動到位置 1。

並且...繼續選擇第二個元素而不是產品 B！

ui 顯示選定的產品 D。

似乎在重新繪制 DOM 時，聚合物 2 以某種方式忽略了這個選定的屬性。 我怎樣才能避免這種情況？

<iron-selector id="something-semantic" attr-for-selected="value" selected={{value}}>
    <template is="dom-repeat" items="[[filteredProductosCategorias]]" as="productoCategoria" id="productoTipo">
        <div class="card-brick" value="[[productCategoria.id]]" tabindex="1" on-keyup="_seleccionaCategoria">
        </div>
    </template>
</iron-selector>

選擇堅持DOM順序中先前選擇的元素。 我怎樣才能使這個選定的值也更新 don dom 更改？

有什么建議可以克服這個問題？ 用戶可能會感到困惑。

Answer 1

問題是 dom-repeat 不會重建內部的元素，因為這將是一個繁重的操作。 它只是為子元素分配新值，這意味着鐵選擇器不知道內容已更改。 在示例中，您選擇了第二個元素，重新排序后，它仍然是選擇的第二個元素。

我對_selectCategory作用感到困惑，因為如果它設置了類別，那么您可能甚至不需要iron-selector 。 我自己從未使用過該元素（也永遠不會使用它，因為自己編寫它很簡單）。 無論如何，如果您使用_selectCategory重新排序，那么只需使用this.set()設置新的value屬性。