Errrg, building a select component from scratch is like building a house out of sand. Just when you think you're making headway, everything comes crashing down. I hate it...
Luckily, Quasar's QSelect
component is a gorgeously crafted work of art! And that's awesome, because if there's one wheel I never want to reinvent, it's QSelect (though in reality, it's more like reinventing calculus).
So without any furthur adon't... let's take a look at what makes QSelect the One QSelect To Rule Them ALLL!!!
Oh... And head over to QuasarComponents.Com to learn more about this stuff!
#0: The Script Tag!
Following along? Sweet!
Here's the js you'll need to get started. Whack it in, and everything else will be easier to follow :)
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'PageIndex',
data () {
return {
slotDog: null,
dog: null,
dogsPretty: null,
dogsObjectOptions: null,
dogsMultiple: [],
dogsOtt: [],
longList: []
}
}
})
</script>
And here is a GitHub repo with all the examples
#1: Model That Data!
To get started with QSelect
, we model some data, and add an array of options
:
<q-select
v-model="dog"
:options="['Panda', 'Lily', 'Moe']"
/>
#2: Or Use an Object For Your Options...
Of course, you can also use a collection of objects. Here's a taste of what that might look like! Note that by default, label
and value
are used by QSelect
<q-select
v-model="dogsObjectOptions"
:options="[
{
label: 'Panda',
value: 1
},
{
label: 'Lily',
value: 2
},
{
label: 'Moe',
value: 3
}
]"
/>
#3: Multiple Select!
Of course multiple select is possible. Just add the multiple
flag and you'll be modeling an array:
<q-select
v-model="dogsMultiple"
:options="['Panda', 'Lily', 'Moe']"
multiple
/>
#4: Making it Sexy!!!
Check out this gorgeous select. Bruised my chin after building this one (10 points to Gryffindor if you can decipher that joke).
<q-select
v-model="dogsPretty"
label="Selected Dog"
label-color="purple-8"
color="purple"
bg-color="purple-1"
popup-content-class="text-grey-8"
options-selected-class="bg-purple-4 text-white"
:options="['Panda', 'Lily', 'Moe']"
style="max-width: 200px;"
outlined
/>
#5: Bunch of Other Cool Stuff In One OTT Example
The API is so dang intuitive, you can probably figure out what most of this does...
<q-select
v-model="dogsOtt"
for="dog"
option-label="name"
option-value="id"
multiple
options-dense
use-chips
filled
rounded
hint="Select a dog"
color="brown"
:suffix="dogsOtt.map(dog => dog.sound).join(', ')"
:loading="false"
clear-icon
counter
:rules="[val => val.length > 1 || 'Please select at least 2 dogs']"
:options="[
{
name: 'Panda',
id: 1,
sound: 'rrrruf! Ruf RUF!'
},
{
name: 'Lily',
id: 2,
sound: 'Beep!'
},
{
name: 'Moe',
id: 3,
sound: 'Aroooooooo'
}
]"
/>
<pre>{{ dogsOtt }}</pre>
#6: What About Performance for Looooong Lists?
Now THIS is cool!
If your list is massive it will still perform fast!
Why? Because Quasar does some fancy pants virtual scroll voodoo behind the scenes:
<q-select
v-model="longList"
:options="Array.from(Array(1000000).keys())"
multiple
/>
#7: Extend it to the Nth Degree with Slots
Want to go on a rampage with me? Okay, grab a coffee, hold onto your seat and we'll modify this bad boi like a 7 of 9!
Good luck coming up with a "but I can't xyz" excuse after this! WOOHOOOO!!!
<q-select
v-model="slotDog"
label
filled
:options="[
{
name: 'Panda',
color: 'grey-4',
},
{
name: 'Lily',
color: 'yellow-8',
},
{
name: 'Moe',
color: 'brown',
}
]"
>
<!-- Add an icon WITHIN the input -->
<template #prepend>
<q-icon name="pets" />
</template>
<!-- Add an icon AFTER the input -->
<template #after>
<q-icon
v-if="slotDog"
color="green"
name="check_circle"
/>
</template>
<!-- We can take total control of the label... -->
<template #label>
Favourite Dog
<q-icon
size="xs"
name="favorite"
/>
</template>
<!-- We can take total control of how options are rendered... -->
<template #option="scope">
<q-item
clickable
@click="scope.toggleOption(scope.opt)"
>
<q-item-section side>
<q-checkbox
:model-value="scope.selected"
@click="scope.toggleOption(scope.opt)"
/>
</q-item-section>
<q-item-section>
{{ scope.opt.name }}
</q-item-section>
</q-item>
</template>
<!-- We can change how the selection is displayed! -->
<template #selected>
<div
v-if="slotDog"
class="flex items-center"
>
<q-icon
class="q-mr-xs"
size="xs"
name="circle"
:color="slotDog.color"
/>{{ slotDog.name }}
</div>
</template>
<!-- Hooking into the top of our options list is easy! -->
<template #before-options>
<q-item-label header>
Favourite Dog <q-icon name="favorite" />
</q-item-label>
</template>
<!-- And hooking into AFTER our options is peasy! -->
<template #after-options>
<q-btn
v-close-popup
class="full-width"
label="cancel"
/>
</template>
</q-select>
Phone Calls
Luke: Hello?
Other end: Hi, is this Luke? The creator of select-a-pet-like-a-boss.com?
Luke: Ummm yes, this is he. How can I help?
Other end: I just want to let you know, that was the most amazing dog selecting experience I've ever had on the internet. Thankyou!!!
Luke: Oh wow, you're most welcome kind stranger!
And that's how you make friends with a Select Component!
What Else Is Covered On QuasarComponents.Com?...
A whooole lot more!
- Filtering
- lazy loading list items (like from an API)
- validation
- positioning the menu
- displaying sanitized html
- keyboard navigation
- use in a
QForm
- Advanced Virtual Scroll techniques (to improve performance for long lists that have custom styling)
- mapping object fields rather than the entire object... And probably a bazillion other things I can't think of right now. We go deep!
So click here, and meet me on the other side of QuasarComponents.Com to discover more!
There you have it! "7 Reasons Quasar's Select Component Is The Gift That Just Keeps Giving!"
Until next time, and remember:
There is nothing you can't build...
Top comments (15)
This sounds amazing! Genius! Supporting the development of Quasar whilst having a course on how to build amazing things with it. Even though I know pretty much everything when it comes to developing web interfaces with Quasar, I am in!! I hope I can learn the PWA, SSR and mobile side of Quasar in this course.
Most of my knowledge of pwa/ssr is
-m pwa
and-m ssr
.Apart from a "refresh" button for pwa, I've never needed to go any deeper!
You might also be interested in the special "PWA + SSR" combo...
quasar.dev/quasar-cli/developing-s...
Anywhere that we can just see the component in action without having to sign up, nearly every select component I have seen has massive accessibility issues and if this one doesn't then I would love to promote it!
Check out some examples in the docs! I honestly think Quasar has some of the best documentation I've ever seen for a frontend framework <3
quasar.dev/vue-components/select#i...
If accessibility is lacking, could you please point me in the right direction for making select components more accessible? I'm embarrassed to say, my understanding of accessibility is not good enough!
One more note on that... Might need to use the "for" attribute to improve accessibility :)
Sure I will check it out this week, happy to help as it looks interesting!
5 doesn't work with quasar 2.0, can't figure out why, any clues?
Not sure, I've tested it twice and seems to be working! I'll add the GitHub repo, one sec :)
works great now, thanks!
what should the data object's type be? I tried with array, string, object, empty, with random values. Please add the js from script section.
Okay, updated!
here's the repo: GitHub Repo With All The Examples
Also, you're more than welcome to add me on discord and ask questions!
ldiebold#0365
I'll add the "script" tag into the article. Thanks for the feedback :)
I always appreciate your enthusiasm!! Funny I was just using this select the other day and was wondering how I could make the "chips" within the select more customized color wise. The default is graying and just using the color attribute changes the whole thing. (like brown above) Maybe it's just some CSS but I didn't see it in the api.
Thanks
How do I remove the highlight once an item is selected? I want to lose focus or blur the control after making a selection.
Nice blog!
There's a typo in the first link of quasarcomponents.com, there's a 's' missing in the URL.
You legend! On it :)