Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Model Options
We can change how the selected value is displayed with the display-value prop.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-select
filled
v-model="model"
:options="options"
stack-label
label="Standard"
:display-value="`Fruit: ${model ? model : 'none'}`"
></q-select>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
options: ["apple", "orange", "grape"],
model: undefined
}
});
</script>
</body>
</html>
We can add more options as we scroll down the dropdown list.
To do this, we write::
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-select
filled
v-model="model"
multiple
:options="options"
:loading="loading"
@virtual-scroll="onScroll"
></q-select>
</div>
</q-layout>
</div>
<script>
const options = [];
for (let i = 0; i <= 1000; i++) {
options.push(`option ${i}`);
}
const pageSize = 20;
const nextPage = 2;
const lastPage = Math.ceil(options.length / pageSize);
new Vue({
el: "#q-app",
data: {
model: undefined,
loading: false,
nextPage
},
computed: {
options() {
return Object.freeze(
options.slice(0, pageSize * (this.nextPage - 1))
);
}
},
methods: {
onScroll({ to, ref }) {
const lastIndex = this.options.length - 1;
if (
this.loading !== true &&
this.nextPage < lastPage &&
to === lastIndex
) {
this.loading = true;
setTimeout(() => {
this.nextPage++;
this.$nextTick(() => {
ref.refresh();
this.loading = false;
});
}, 500);
}
}
}
});
</script>
</body>
</html>
We add the @virtual-scroll directive to listen for dropdown list scrolling events.
When we scroll the bottom, the onScroll method runs.
to has the page number we’re going to.
ref.refresh refresh the options.
The options computed property returns the items we want to display.
Toggle Dropdown Options
We can change the toggles to lets users select dropdown options.
To do this, we write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-select
filled
v-model="model"
:options="options"
label="Multi with toggle"
multiple
emit-value
map-options
>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
<q-item-section>
<q-item-label v-html="scope.opt.label"></q-item-label>
</q-item-section>
<q-item-section side>
<q-toggle v-model="model" :val="scope.opt.value"></q-toggle>
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</q-layout>
</div>
<script>
const options = [
{
label: "apple",
value: 1
},
{
label: "pear",
value: 2
},
{
label: "orange",
value: 3
}
];
new Vue({
el: "#q-app",
data: {
options,
model: []
}
});
</script>
</body>
</html>
We populate the option slot and put the q-toggle inside to let us toggle the dropdown choices on or off.
model has the choices selected.
scope.opt.value has the dropdown toggle choice.
Conclusion
We can add various kinds of dropdowns into our Vue app with the Quasar library.
