Vuetify v-select – set default values for multi select

I'm trying to set the defaults values of the v-select component. At the moment it only appears to be setting it to the first value. Within our app we allow the user to select options which are pulled from an API. The issue we faced is using the standard v-select there were far too many options. Therefore I created a way around this using the v-datatable to select the options:

enter image description here

After selecting however, my v-select only shows the first item I checked and not the rest:

<v-select
  v-model="selectValue"
  chips
  multiple
  :items="selectItems"
/>

Here's the selectValue and selectItems methods:

setItems() {
    const items = [];

    if (!_.isEmpty(this.items[this.model])) {
        items.push({
            text: this.items[this.model][0][field],
            value: this.items[this.model][0].id
        });
    }

    this.selectItems = items;
},

setValue() {
    if (!_.isEmpty(this.items[this.model])) {
        const items = [];

        _.values(this.items[this.model]).forEach(value => {
            items.push({
                text: value.name,
                value: value.id,
            });
        });

        this.selectValue = items;
    }
},

However this only appears to be setting the default value as the first item:

enter image description here

If I use the vue tools I can see that the initial and lazy values are set:

enter image description here

However the selectedItems isn't correct. Am I missing something here? I thought setting the v-model would handle this! Thanks

enter image description here



Read more here: https://stackoverflow.com/questions/66336747/vuetify-v-select-set-default-values-for-multi-select

Content Attribution

This content was originally published by user1469914 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: