Define itemsSelected manually after options changes

[softmonkeyjapan]

Context

I have a form to edit some data and I need to check by default the pre-selected items.

Problem

I've tried to define it manually:

this.itemsSelected = this.selectedFromList;

but it does not check the boxes. If I define a watch, I can see the itemsSelected change:

watch: {
  itemsSelected(value): {
    console.log('itemsSelected', value);
  },
}

but it does not seems to be reflected by v-model:items-selected. Am I missing something here ?

EDIT

It seems to work when I implement the datatable in a regular view but in a modal (which is my case) it is not working somehow...

[softmonkeyjapan]

I found the cause of my issue. Element in itemsSelected should be an exact copy of an object from items. My API relation was returning only a partial information (including an id though), therefore the reason it wasn't working.

I had to loop over the collection in order to selected the entire matching object:

if (this.contact.contact_list && this.contact.contact_list.length > 0) {
  const ids = new Set(this.contact.contact_list.map(list => list.id));
  this.itemsSelected = this.items.filter(item => ids.has(item.id));
}

I think it would be better if by default as long as an id is provided, it should be able to find it in the collection. If not, we should be able to set an option allowing us to define which column to look for rather than the entire object.

[januarfonti]

+1 for this idea, as long as id is provided, then the item will be selected.