Categories
Quasar

Developing Vue Apps with the Quasar Library — Filtering and Autocomplete

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.

Filtering and Autocomplete

We can add an autocomplete with the q-select component.

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"
            use-input
            input-debounce="0"
            label="Simple filter"
            :options="options"
            @filter="filterFn"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  No results
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      const stringOptions = ["apple", "orange", "grape"];

      new Vue({
        el: "#q-app",
        data: {
          options: [],
          model: []
        },
        methods: {
          filterFn(val, update) {
            if (val === "") {
              update(() => {
                this.options = stringOptions;
              });
              return;
            }

            update(() => {
              const needle = val.toLowerCase();
              this.options = stringOptions.filter((v) =>
                v.toLowerCase().includes(needle)
              );
            });
          }
        }
      });
    </script>
  </body>
</html>

We add the q-select component with the use-input options to let users enter values into the dropdown.

And we add the @filter directive to listen for inputs from the user.

filterFn has the val parameter which has the inputted value.

update is a function that lets us update the options when we type something into the input box.

The no-option slot lets us show something when no options are found.

To add an autocomplete input, 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
            :value="model"
            use-input
            hide-selected
            fill-input
            input-debounce="0"
            :options="options"
            @filter="filterFn"
            @input-value="setModel"
            hint="Text autocomplete"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  No results
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      const stringOptions = ["apple", "orange", "grape"];

      new Vue({
        el: "#q-app",
        data: {
          options: [],
          model: []
        },
        methods: {
          filterFn(val, update) {
            if (val === "") {
              update(() => {
                this.options = stringOptions;
              });
              return;
            }

            update(() => {
              const needle = val.toLowerCase();
              this.options = stringOptions.filter((v) =>
                v.toLowerCase().includes(needle)
              );
            });
          },
          setModel(val) {
            this.model = val;
          }
        }
      });
    </script>
  </body>
</html>

We keep the use-input prop and @filterFn directives the same.

And we add the fill-input prop to enable the autocomplete.

We separate the v-model directive into the @input-value directive and the value prop.

We listen to the input-value event to get the inputted value and set it as the value of the model reactive property.

And we set the value to the model reactive property to set the inputted value.

Conclusion

We can add filtering and autocomplete dropdowns into our Vue app with the Quasar library.

Categories
Quasar

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

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.

Categories
Quasar

Developing Vue Apps with the Quasar Library — Dropdowns Options

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.

Dropdown Colors

We can change the text and background colors of dropdowns.

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
            color="grey-3"
            outlined
            label-color="orange"
            v-model="model"
            :options="options"
            label="Label"
          >
            <template v-slot:append>
              <q-icon name="event" color="orange" />
            </template>
          </q-select>

          <br />

          <q-select
            color="lime-11"
            bg-color="green"
            filled
            v-model="model"
            :options="options"
            label="Label"
          >
            <template v-slot:prepend>
              <q-icon name="event" />
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

We set the color prop to set the border color.

label-color sets the label color.

bg-color sets the background color.

Clearable Dropdown

We can add the clearable prop to let us clear the selected value.

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
            clearable
            filled
            color="purple-12"
            v-model="model"
            :options="options"
            label="Label"
          ></q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

Show Options in a Dialog

We can show dropdown options in a dialog.

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"
            label="Simple select"
            :options="options"
            style="width: 250px;"
            behavior="dialog"
          ></q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

We set the behavior to dialog to make the items show in a dialog box.

Multiple Selections

We can let users select multiple items from a dropdown.

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"
            label="Simple select"
            :options="options"
            multiple
          ></q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: []
        }
      });
    </script>
  </body>
</html>

We add the multiple prop to let users select multiple options.

model is an array so the selected items can be added with push .

Conclusion

We can add dropdowns with various options into our Vue app with the Quasar library.

Categories
Quasar

Developing Vue Apps with the Quasar Library — Dropdowns

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.

Dropdown

We can add a dropdown into our Vue app with the q-select component.

For instance, 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
            outlined
            v-model="model"
            :options="options"
            label="Outlined"
          >
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

We add the q-select component with the options prop to add the options.

outlined adds an outline to the dropdown.

Other styles include filled , rounded , borderless , square , and standout .

They can be combined to make different styles.

Dropdown Decorators

We can add icons into our dropdown.

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
            outlined
            v-model="model"
            :options="options"
            dense
            :options-dense="options"
          >
            <template v-slot:prepend>
              <q-icon name="event"></q-icon>
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

We populate the prepend slot with an icon to add one to the left side.

Also, we can add other items. 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
            outlined
            v-model="model"
            :options="options"
            dense
            :options-dense="options"
            bottom-slots
          >
            <template v-slot:before>
              <q-icon name="flight_takeoff"></q-icon>
            </template>

            <template v-slot:append>
              <q-icon
                v-if="model !== ''"
                name="close"
                @click.stop="model = ''"
                class="cursor-pointer"
              />
              <q-icon name="search" @click.stop></q-icon>
            </template>

            <template v-slot:hint>
              Field hint
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

The before slot lets us add items to the left of the dropdown outside it.

The append slot lets us add items to the right side inside the dropdown.

The hint slot lets us add a hint when it’s added along with the bottoms-slots prop.

Conclusion

We can add dropdowns with various kinds of addons into our Vue app with the Quasar library.

Categories
Quasar

Developing Vue Apps with the Quasar Library — File Inputs and Input Masks

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.

File Input

We can use the q-input component to add a file input.

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-input
            @input="val => { file = val[0] }"
            filled
            type="file"
            hint="Native file"
          >
          </q-input>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          file: undefined
        }
      });
    </script>
  </body>
</html>

to add the file input.

We listen to the input event to get the selected files from the val parameter.

The type is set to file to make the input a file input.

Text Area

Setting the type to textarea will make the input a text area:

<!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-input v-model="text" filled type="textarea"> </q-input>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          text: undefined
        }
      });
    </script>
  </body>
</html>

The autogrow prop makes the text input automatically grow to fit the text when we enter text:

<!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-input v-model="text" filled autogrow> </q-input>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          text: undefined
        }
      });
    </script>
  </body>
</html>

Debounce

The debounce prop makes delays the binding of the input value to the model reactive property:

<!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-input v-model="text" debounce="500" filled placeholder="Search">
          </q-input>
          <p>{{text}}</p>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          text: undefined
        }
      });
    </script>
  </body>
</html>

The denounce duration is in milliseconds.

Input Masks

We can add masked inputs with the q-input component and the mask prop:

<!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-input
            filled
            v-model="phone"
            label="Phone"
            mask="(###) ### - ####"
            fill-mask
            hint="Mask: (###) ### - ####"
          >
          </q-input>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          phone: undefined
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add various kinds of input fields into our Vue app with the Quasar v-input component.