vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.69k stars 6.95k forks source link

[Feature Request] Support added/deleted callbacks for deletable-chips in <v-select> #4054

Open david-wg2 opened 6 years ago

david-wg2 commented 6 years ago

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>

KaelWD commented 6 years ago

I'd say this could be applied to any sort of multiple select, not just deletable-chips.

david-wg2 commented 6 years ago

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.

My current workaround

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
        }
    }
},