2

I have the following v-select:

<v-select
  flat
  dense
  outlined
  multiple
  small-chips
  deletable-chips
  hide-details
  v-model='chosenStrings'
  label='Strings'
  :items='strings'
  :menu-props='{nudgeBottom: 40}'
>
  <template v-slot:append>
    <v-icon>
      mdi-chevron-down
    </v-icon>
  </template>
</v-select>

And this is my data:

strings: ['a', 'b', 'c', 'd'],
chosenStrings: ['d']

I can't figure out a way to make it have at least one item always selected. Perhaps make an item disabled if it's the only one selected.

I don't see a required prop in the documentation. Tried to use item slot and provide my own v-list-item, but guess didn't do something right, as it also failed.

Any suggestions, please?

Igal
  • 5,833
  • 20
  • 74
  • 132
  • Please see this https://stackoverflow.com/questions/64116145/vuetify-multiple-v-select-required-rules-dont-work. – Altantur Nov 21 '20 at 12:50
  • @TendyTeslo Thank you, but I've already seen that. It only checks to see if an item is selected, but doesn't prevent the removal of the last item. And I need to have at least one selected at all times. – Igal Nov 21 '20 at 12:59

1 Answers1

0

You can bind the deletable-chips with a condition and add hide-selected prop Here is this.

<v-select
  flat
  dense
  outlined
  multiple
  small-chips
  :deletable-chips="chosenStrings.length>1"
  hide-selected
  hide-details
  v-model='chosenStrings'
  label='Strings'
  :items='strings'
  :menu-props='{nudgeBottom: 40}'
>
  <template v-slot:append>
    <v-icon>
      mdi-chevron-down
    </v-icon>
  </template>
</v-select>
tuhin47
  • 5,172
  • 4
  • 19
  • 29
  • Tried that too: it will prevent the removal of the last element with chip, but I still can remove it in the v-select itself. – Igal Nov 21 '20 at 13:01
  • please check the demo https://codepen.io/tuhin47/pen/BazgmrY?editors=1010 – tuhin47 Nov 21 '20 at 13:04
  • Thanks, I did. As I said, it does prevent the removal of the last item with chip, but I'm still able to remove it by opening the v-select menu and clicking on the item. – Igal Nov 21 '20 at 13:19
  • `hide-selected` prop may help – tuhin47 Nov 21 '20 at 13:24
  • 3
    Actually, I just thought of a better idea (since I don't want to hide any strings). Instead of having strings as array in the data property, I'm making use of `computed` property and I return an array of objects like this: `{text: 'A', value: 'a', disabled: this.chosenStrings.length === 1 && this.chosenStrings.includes('a')}`. Now the last item becomes disabled! – Igal Nov 21 '20 at 13:31