1

I have a vaadin-checkbox:

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

I defined my properties:

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

When I now change the data by pressing some button:

_selectItem(event) {
    const item = event.model.item;

    if (item.checked === true) {
        this.$.grid.deselectItem(item);
    } else {
        this.$.grid.selectItem(item);
    }

    item.checked = !item.checked;
}

The state of the checkbox is still checked="true". Why isnt the checkbox getting updated? The same thing when I change the description of the item:

_selectItem(event) {
    event.model.item.description = 'test';
}

The test description is never appearing. The checkbox is never getting updated.

cfrick
  • 35,203
  • 6
  • 56
  • 68
Mulgard
  • 9,877
  • 34
  • 129
  • 232

1 Answers1

2

The reason why the checkbox does not get updated by the button click handler is in the Polymer 2 data system. Polymer does not detect the change and does not update the template accordingly.

In order to make the change in a way that Polymer would detect it you have two options:

  • Use this.set(`items.${event.model.index}.checked`, !item.checked) if you can reliably assume that the index used by dom-repeat always matches that elements's index in the items array (it is not the case if you use sorting or filtering features of dom-repeat). See an example here https://jsfiddle.net/vlukashov/epd0dn2j/
  • If you do not know the index of the updated item in the items array, you can also use the Polymer.MutableData mixin and notify Polymer that something has changed inside the items array without specifying the index of the changed item. This is done by calling this.notifyPath('items') after making a change. However, this requires that your element extends the Polymer.MutableData mixin, and that dom-repeat has the mutable-data attribute set. See an example here: https://jsfiddle.net/vlukashov/epd0dn2j/24/

More information on this in the Polymer 2 docs.

Viktor Lukashov
  • 338
  • 1
  • 6
  • thx for your answer but the examples arent working for me. maybe because my checkboxes are inside a vaadin-grid? I try setting up an example fiddle. – Mulgard Feb 25 '18 at 17:07
  • Could you please share more context? Where does the event handled by `_selectItem(event)` come from? On another note, could you describe the use case you are implementing? If you need a checkbox to reflect the selection state of an item in a vaadin-grid, have you looked at the [`` element](https://vaadin.com/elements/vaadin-grid/html-examples/grid-selection-demos#grid-selection-demos-multi-selection-column)? – Viktor Lukashov Feb 25 '18 at 19:18
  • Sorry. I was wrong. Your solution with `this.set(\`items.${event.model.index}.checked\`, !item.checked)` works perfectly. Had another issue in my code. I need to have a seperate checkbox due to a very special design which is very hard to implement using the `` – Mulgard Feb 25 '18 at 20:17