I am currently working on achieving the following goal:

When I select the option "Alle openstaande" (result_id = 0), I want to select all these result_ids: [-1,-2,-3,-5,-7,-8,-11,-12] and deselect result_id 0.

The variable mergedResults stores an array of the result_ids that need to be selected

I am struggling to find a way to add to the currently selected options using the methods available

My blade file includes:

              <dd-results
                        name="resultcodes-select"
                        v-model="selected.resultcodes"
                        :select-all="true"
                        :multiple="true"
                        :openstaande="true"
                        :include-ids="true"
                        :project-id="selected.project"
                        title="@lang('rapportage.resultcode')"
                        :include-negative="true"
                        return-key="result_id"
                        >
                    </dd-results>

My vue file:

<template>
    <span>
        <label v-if="title">{{title}}</label>
        <v-select
            :options="results"
            label="name"
            :placeholder="placeholderText"
            :close-on-select="closeOnSelectValue"
            :disabled="isDisabled"
            :multiple="multiple"
            :value="value"
            @input="handleInput($event)"
            :loading="isLoading"
            :reduce="reduceKey"
        >
        <div slot="no-options">{{noOptionsText}}</div>
        </v-select>
    </span>

</template>

<script>
import vSelect from "vue-select";
import Language from "../../classes/Language";

export default {
    name: 'dd-results',
    components: {
        'v-select': vSelect
    },
    props: {
        placeholder: {
            type: String,
            default: null
        },
        closeOnSelect: {
            type: Boolean,
            default: true
        },
        isDisabled: {
            type: Boolean,
            default: false,
        },
        // Select multiple values
        multiple: {
            type: Boolean,
            default: false
        },
        openstaande: {
            type: Boolean,
            default: false
        },
        value: {
            default: null
        },
        // Show/hide 'All projects' placeholder
        selectAll: {
            type: Boolean,
            default: false
        },
        projectId: {
            default: null,
            required: true
        },
        title: {
            type: String,
            default: null
        },
        includeIds: {
            type: Boolean,
            default: false
        },
        // Show/not show negative result codes
        includeNegative: {
            type: Boolean,
            default: false
        },
        // If filled: only return this value, otherwise full object
        returnKey: {
            type: String,
            default: null,
        },
        excludeTypes: {
            type: Array,
        }
    },
    data() {
        return {
            language: new Language,
            results: [],
            isLoading: false,
        }
    },
    created() {
        var self = this;
        this.language.set(lan);
    },
    methods: {
        reduceKey(option) {
            return this.returnKey != null ? option[this.returnKey] : option;
        },

        handleInput($event) {
            this.$emit('input', $event);
       
            if($event.includes(0)) {
                this.addOpenstaande($event);
            }
        },

        addOpenstaande(value) {
            var openstaandeResult = [-1,-2,-3,-5,-7,-8,-11,-12];

            var mergedResults = [... new Set (value.concat(openstaandeResult))];

            const removeIndex = mergedResults.indexOf(0);
            if (removeIndex > -1) {
                mergedResults.splice(removeIndex, 1); 
             }

             this.reset(mergedResults);

            console.log(mergedResults);

        },

        reset(selected=false) {
            // 1. Remove selected itemboxes
            console.log(this.$el,$(this.$el).find('.vs__selected'));
            $(this.$el).find('.vs__selected').remove();
            setTimeout(() => {
                // 2. Reset the placeholder
                $(this.$el).find('.vs__selected-options input').attr('placeholder', this.placeholderText);
            }, 100);

            if(selected !== false) {

            }

        }
    },
    computed: {
        // Text in dropdown when no options available
        noOptionsText() {
            return this.language.trans('app', 'no_results');
        },
        // Determine placeholder text. Depends on selectAll option. Custom placeholder always overrides.
        placeholderText() {
            if(this.placeholder != null) {
                return this.placeholder;
            }
            else if(this.selectAll) {
                return this.language.trans('rapportage', 'resultcode_alle');
            } else {
                return this.language.trans('rapportage', 'resultcode_selecteren');
            }
        },
        // Default to not closing after selection when multiple projects can be selected
        closeOnSelectValue() {
            if(this.multiple) {
                return false;
            } else {
                return this.closeOnSelect;
            }
        }
    },
    watch: {
        'projectId'(newVal) {

            if(this.value != null) {
              if(this.value.length != null) {
                this.value.length = 0;
              }
            }
            
            var self = this;
            if(newVal != null) {
                self.isLoading = true;
                // Get results and fill dropdown
                axios.get('/projects/'+newVal+'/results').then(result => {
                    self.results = Object.values(result.data);
                    console.log(self.results);

                    for (var i = 0; i < self.results.length; i++) {
                        // If negatives need to be filtered and index is negative: remove
                        if(self.results[i].result_id < 0 && !this.includeNegative) {
                            self.results.splice(i, 1);
                            i--; // Reset index due to removed item
                            continue;
                        } 
                        // If type is in excludeTypes: remove
                        if (this.excludeTypes) {
                            if (this.excludeTypes.indexOf(self.results[i].type) > -1) {
                                self.results.splice(i, 1);
                                i--;
                                continue;
                            }
                        }
                    }
                    for (var i = 0; i < self.results.length; i++) {
                        if (self.includeIds) {
                            // Change "name" to "(result_id) name"
                            self.results[i].name = "(" + self.results[i].result_id + ") " + self.results[i].name;
                        }
                    }

                    
                    if(this.multiple === true && this.openstaande) {
                        self.results.unshift({
                            result_id: 0,
                            name: this.language.trans('app', 'alle_openstaande')
                        })
                    }
                }).catch(error => {
                    console.log(error);
                }).then(data => {
                    self.isLoading = false;
                })
            } else {
                this.results = [];
            }
        }
    }
}
</script>


<style>
    select:required:invalid {
        color: gray;
    }

    .vs--disabled .vs__dropdown-toggle, .vs--disabled .vs__clear, .vs--disabled .vs__search, .vs--disabled .vs__selected, .vs--disabled .vs__open-indicator {
        background-color: #D3D3D3;
        color: #808080;
    }
    
    option {
        color: black;
    }

    .vs__dropdown-toggle {
        background: #fff;
    }

</style>