1

我有一个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';
}

描述test永远不会出现。复选框永远不会更新。

4

1 回答 1

2

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

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

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

Polymer 2 文档中的更多信息。

于 2018-02-24T10:13:24.050 回答