在 dom 更改元素的顺序后，聚合物 2 铁选择器选定的元素不会更新答案

【问题标题】：Polymer 2 iron-selector selected element doesn't update after the dom changes order of elements在 dom 更改元素的顺序后，聚合物 2 铁选择器选定的元素不会更新
【发布时间】：2020-01-24 19:25:38
【问题描述】：

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

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

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

并且...继续选择第二个元素而不是产品 B！

用户界面显示选择的产品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 更改？？

有什么建议可以解决这个问题吗？？用户可能会感到困惑。

【问题讨论】：

标签： javascript polymer-2.x

【解决方案1】：

问题是 dom-repeat 不会重建里面的元素，因为那将是一个繁重的操作。它只是为子元素分配新值，这意味着 Iron-selector 不知道内容已更改。在示例中，您选择了第二个元素，并且在重新排序之后，它仍然是第二个被选中的元素。

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

【讨论】：

没关系设置类别，它只是一个重命名的函数。这方面的阴暗面是元素“仍然被选中”在引擎盖下......但没有反映在 UI 上。删除 iron-selector ，我们团队一直在想一些事情，删除 iron-selector，因为这似乎是一个常见问题，我在 poylmer 的 repo 上发现了几个 github 问题。无论如何，我们需要仔细研究它，因为许多其他组件都依赖于相同的功能。但是，正如你所说，我完全同意 DIY 会好得多。另外，只是说，我真的认为我不喜欢 Polymer。
是的，过去三年一直与 Polymer 合作；从 1 升级到 2 是一种享受。它仍然有一些奇怪的扭结。无论如何，我会为filteredProductsCategories 中的项目添加一个属性，例如'selected'：'selected'，然后将其添加为一个类：class$="[[selected]]"。最后添加一个 ontap 侦听器，然后更改所有项目中 selected 的值（删除，然后将“selected”添加到正确的项目中）。