Quasar's "Select" Component... 7 Reasons It's The Gift That Just Keeps Giving!
Published: 2021-08-08 08:08:37

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](https://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 :)

```vue
<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](https://github.com/ldiebold/quasar-q-select-blog-post)

## #1: Model That Data!
To get started with `QSelect`, we model some data, and add an array of `options`:

![Quasar QSelect Basic Example](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392863/Quasar%20QSelect%20Basic%20Example.png)

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

![Quasar QSelect Basic Example With An Object For Options](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392863/Quasar%20QSelect%20Basic%20Example.png)

```vue
<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:

![Quasar QSelect Multiple](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392863/Quasar%20QSelect%20Multiple.png)

```vue
<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).

![Quasar QSelect Sexified](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392863/Quasar%20QSelect%20Sexified.png)

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

![Quasar QSelect Over The Top Example A](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392863/Quasar%20QSelect%20Over%20The%20Top%20Example%20A.png)

![Quasar QSelect Over The Top Example B](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392863/Quasar%20QSelect%20Over%20The%20Top%20Example%20B.png)

![Quasar QSelect Error Handling](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392863/Quasar%20QSelect%20Error%20Handling.png)

```vue
<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:

![Quasar QSelect Massive List Example A](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392864/Quasar%20QSelect%20Massive%20List%20Example%20A.png)

![Quasar QSelect Massive List Example B](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392863/Quasar%20QSelect%20Massive%20List%20Example%20B.png)

```vue
<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!!!

![Quasar QSelect Scoped Slots Example](https://res.cloudinary.com/quasarcast-com/image/upload/v1628392865/Quasar%20QSelect%20Scoped%20Slots%20Example.png)

```vue
<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?...](https://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](https://quasarcomponents.com), and meet me on the other side of [QuasarComponents.Com](https://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...