Categories
Quasar

Developing Vue Apps with the Quasar Library — Dropdown Models and Options

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *