Элемент не обновляется при изменении данных

Question

У меня есть 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 описание никогда не появляется. Флажок никогда не обновляется.

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.MutableDataMixin и уведомить Polymer,что что- то изменилось внутри items массив без указания индекса измененного элемента. Это делается по телефону this.notifyPath('items') после внесения изменений. Однако это требует, чтобы ваш элемент расширял Polymer.MutableData миксин, и это dom-repeat имеет mutable-data набор атрибутов. Смотрите пример здесь: https://jsfiddle.net/vlukashov/epd0dn2j/24/

Больше информации об этом в Документах Polymer 2.