Luke for Quasar

Posted on Aug 8, 2021 • Updated on Aug 12, 2021

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>

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)

Roland Doda • Aug 8 '21

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.

Luke • Aug 9 '21

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

GrahamTheDev • Aug 8 '21

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!

Luke • Aug 9 '21

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

GrahamTheDev • Aug 9 '21

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

Wiktor Cieślak • Aug 11 '21

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

Luke • Aug 12 '21

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

Wiktor Cieślak • Aug 13 '21

works great now, thanks!

Wiktor Cieślak • Aug 11 '21 • 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.

Luke • Aug 12 '21

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

Luke • Aug 12 '21

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

devimposter • Aug 13 '21

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