dom 更改元素顺序后，Polymer 2 铁选择器所选元素不会更新

Question

我有一个组件，它有 4 个实例。

用户点击数字 2，产品 B 被选中。

当dom重新排序时，稍后他选择另一个选项后，这4个组件card-brick实例被重新排序（因为价格变化，所以这在流程中自动发生）一切都很好...除了所选元素，即数字 2，移动到位置 1。

and...继续选择第2个元素，而不是产品B！

ui显示选择的产品D。

似乎聚合物 2 在重绘 DOM 时忽略了这个选定的属性。我怎样才能避免这种情况？

<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 不会重建内部的元素，因为那将是一项繁重的操作。它只是为子元素分配新值，这意味着 iron-selector 不知道内容已更改。在示例中，您选择了第二个元素，重新排序后，它仍然是选择的第二个元素。

我对 _selectCategory 的作用感到困惑，因为如果它设置了类别，那么您可能甚至不需要 iron-selector。我自己从未使用过该元素（也永远不会使用它，因为自己编写它很简单）。无论如何，如果您使用 _selectCategory 重新排序，则只需将新的 value 属性设置为 this.set().

dom 更改元素顺序后，Polymer 2 铁选择器所选元素不会更新

Polymer 2 iron-selector selected element doesn't update after the dom changes order of elements

javascript

polymer-2.x