Question

我有PI<float>：

vaadin-checkbox

我定义了我的属性：

<vaadin-checkbox id=[[item.id]] disabled="true" checked="[[item.checked]]">[[item.description]]</vaadin-checkbox>

当我现在按下某个按钮更改数据时：

static get properties() {
    return {
        items: {
            type: Array,
            notify: true,
            value: function() {
                return [];
            }
        }
    };
}

复选框的状态仍为_selectItem(event) { const item = event.model.item; if (item.checked === true) { this.$.grid.deselectItem(item); } else { this.$.grid.selectItem(item); } item.checked = !item.checked; }。为什么复选框没有更新？当我更改项目的描述时，同样的事情：

checked="true"

_selectItem(event) { event.model.item.description = 'test'; }描述永远不会出现。该复选框永远不会更新。

Answer 1

按钮单击处理程序未更新复选框的原因在于Polymer 2数据系统。 Polymer不会检测到更改，也不会相应地更新模板。

为了以Polymer检测它的方式进行更改，您有两种选择：

如果您可以可靠地假设this.set(`items.${event.model.index}.checked`, !item.checked)使用的index始终与dom-repeat数组中的元素索引匹配，则使用items（如果您使用的话，情况并非如此）排序或过滤dom-repeat）的功能。请在此处查看示例https://jsfiddle.net/vlukashov/epd0dn2j/
如果您不知道items数组中更新项目的索引，您还可以使用Polymer.MutableData mixin并通知Polymer 内部已更改 items数组，但未指定已更改项的索引。这是通过在进行更改后调用this.notifyPath('items')来完成的。但是，这需要您的元素扩展Polymer.MutableData mixin，并且dom-repeat设置了mutable-data属性。请在此处查看示例：https://jsfiddle.net/vlukashov/epd0dn2j/24/

Polymer 2 docs中有关此内容的更多信息。

数据更改时元素未更新

1 个答案: