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

Created on 14 May 2018  路  2Comments  路  Source: vuetifyjs/vuetify

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>

VCombobox feature

Most helpful comment

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

All 2 comments

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.

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
        }
    }
},
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sebastianmacias picture sebastianmacias  路  3Comments

smousa picture smousa  路  3Comments

Antway picture Antway  路  3Comments

KuroThing picture KuroThing  路  3Comments

Webifi picture Webifi  路  3Comments