0

I have a 20-25 names coming from API where I'll need to show them in a drop down box (requirement). I'm using Vue v-autocomplete here to display the selected names on the field. I've used custom item called Select All where the user can select all the names in the drop down list, but what I also need to do when the user clicks on Select All is that I don't want to show all the names in the Autocomplete field including Select All Chip. Only items that are selected individually without Select All should show as Chips.

Here is my code sandbox I've attempted so far. I'm new to Vue js, so I'm hoping to get some thoughts on controlling the chips on v-autocomplete.

v-autocomplete sandbox

user2824374
  • 168
  • 3
  • 14
  • Your sandbox does not work - when I try to select any option individually then nothing happens. Only if I choose `Select All` then all options are selected. You will need to use the `selection` slot and render chips only for those options which are not called/named `Select All`. – IVO GELOV Nov 11 '22 at 10:51

1 Answers1

1

Instead of including "Select All" in the array of names, you can use the prepend-item slot to include a separate Select All checkbox.

If you need to differentiate between names selected via individual click and those selected via the Select All checkbox you will probably need a new property in the names array to track that, say a boolean that is true if selected one way and false the other.

You'll also need a slot like selection to customize the display of your chips where you can use v-if to conditionally render a chip based on that new boolean property.

This codesandbox I believe is pretty close to what you're after

yoduh
  • 7,074
  • 2
  • 11
  • 21
  • Thanks mate. I'll take this. I would have done this in react using renderInput attribute in Autocomplete but I wasn't aware of selection slots in Vue. This certainly helps. – user2824374 Nov 12 '22 at 00:57
  • 1
    No problem! It's not specifically "selection slots" that are a thing, but [slots](https://vuejs.org/guide/components/slots.html) in general that component authors sometimes provide to help users customize specific parts of their components. – yoduh Nov 12 '22 at 01:11
  • Yeah thanks for the tip mate. I attempted to modify based on your comments to update the selection slot to add (+3 more) if the selected names goes more than 5. Here is the sandbox I forked from yours. Any hints on what could have gone wrong? https://codesandbox.io/s/vuetify-2-v-text-field-forked-ruug0b?file=/src/App.vue – user2824374 Nov 12 '22 at 01:57
  • 1
    the selection slot evaluates itself for **every** selected item. it's meant to be a way to customize every item the same way. so if you don't somehow limit the "(+x more)" to display only once, it'll display for every selected item that passes your `v-if` check. trying to still follow your requirement of keeping all items selected with 'Selected All' to be hidden but now also hiding all items if there would be more than 5 v-chips, this is what I came up with: https://codesandbox.io/s/vuetify-2-v-text-field-forked-fdyppo?file=/src/App.vue – yoduh Nov 14 '22 at 00:57