Open david-wg2 opened 6 years ago
I'd say this could be applied to any sort of multiple select, not just deletable-chips.
I'd say this could be applied to any sort of multiple select, not just deletable-chips.
Good point. I've only used deletable-chips
so far, so my focus is a bit narrow.. Feel free to edit the issue to make it clearer.
For people who might come to this issue because they're looking for a solution to this, I'll post my not so elegant workaround. I listen for the change
event emitted by the <v-select>
and diff the current and new values:
selectChange(newValue) {
const [before, after] = [this.editedItem.selectValues, newValue];
if (before.length > after.length) {
const removed = before.filter(e => !after.includes(e));
console.log("removed " + removed);
} else if (before.length < after.length) {
const added = after.filter(e => !before.includes(e));
console.log("added " + added);
}
},
Edit: After 1.1.0
this no longer works. I've had to resort to an even more hacky check:
watch: {
"editedItem.selectedValues"(after, before) {
if (!(after instanceof Array) || !(before instanceof Array)) {
return;
}
if (before.length > after.length) {
// removed
} else if (before.length < after.length) {
// added
}
}
},
Problem to solve
It will allow users to easily post/delete to their server when items are changed in the
<v-select>
Proposed solution
Support added/deleted callbacks for
deletable-chips
in<v-select>