DEV Community

Luke for Quasar

Posted on • Updated on

Quasar's "Select" Component... 7 Reasons It's The Gift That Just Keeps Giving!

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>


Enter fullscreen mode Exit fullscreen mode

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:

Quasar QSelect Basic Example



<q-select
  v-model="dog"
  :options="['Panda', 'Lily', 'Moe']"
/>


Enter fullscreen mode Exit fullscreen mode

#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

Quasar QSelect Basic Example With An Object For Options



<q-select
  v-model="dogsObjectOptions"
  :options="[
    {
      label: 'Panda',
      value: 1
    },
    {
      label: 'Lily',
      value: 2
    },
    {
      label: 'Moe',
      value: 3
    }
  ]"
/>


Enter fullscreen mode Exit fullscreen mode

#3: Multiple Select!

Of course multiple select is possible. Just add the multiple flag and you'll be modeling an array:

Quasar QSelect Multiple



<q-select
  v-model="dogsMultiple"
  :options="['Panda', 'Lily', 'Moe']"
  multiple
/>


Enter fullscreen mode Exit fullscreen mode

#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).

Quasar QSelect Sexified



<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
/>


Enter fullscreen mode Exit fullscreen mode

#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...

Quasar QSelect Over The Top Example A

Quasar QSelect Over The Top Example B

Quasar QSelect Error Handling



<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>


Enter fullscreen mode Exit fullscreen mode

#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:

Quasar QSelect Massive List Example A

Quasar QSelect Massive List Example B



<q-select
  v-model="longList"
  :options="Array.from(Array(1000000).keys())"
  multiple
/>


Enter fullscreen mode Exit fullscreen mode

#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!!!

Quasar QSelect Scoped Slots Example



<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>


Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
the_one profile image
Roland Doda

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.

Collapse
 
ldiebold profile image
Luke

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...

Collapse
 
grahamthedev profile image
GrahamTheDev

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!

Collapse
 
ldiebold profile image
Luke

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 :)

Collapse
 
grahamthedev profile image
GrahamTheDev

Sure I will check it out this week, happy to help as it looks interesting!

Collapse
 
wiktorcie profile image
Wiktor Cieślak

5 doesn't work with quasar 2.0, can't figure out why, any clues?

Collapse
 
ldiebold profile image
Luke

Not sure, I've tested it twice and seems to be working! I'll add the GitHub repo, one sec :)

Collapse
 
wiktorcie profile image
Wiktor Cieślak

works great now, thanks!

Collapse
 
wiktorcie profile image
Wiktor Cieślak • Edited

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.

Collapse
 
ldiebold profile image
Luke

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

Collapse
 
ldiebold profile image
Luke

I'll add the "script" tag into the article. Thanks for the feedback :)

Collapse
 
devimposter1 profile image
devimposter

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

Collapse
 
cdecinkoknight profile image
cdecinkoKnight

How do I remove the highlight once an item is selected? I want to lose focus or blur the control after making a selection.

Collapse
 
theakshits profile image
Akshit Sharma

Nice blog!

There's a typo in the first link of quasarcomponents.com, there's a 's' missing in the URL.

Collapse
 
ldiebold profile image
Luke

You legend! On it :)