feat(docs): QInput type="number" specific docs #3924

quasarframework · Apr 19, 2019 · 62b3346 · 62b3346
1 parent 5db96c7
commit 62b3346
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/docs/src/examples/QInput/InputTypeNumber.vue b/docs/src/examples/QInput/InputTypeNumber.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="q-pa-md">
+    <q-input
+      v-model.number="model"
+      type="number"
+      filled
+      style="max-width: 200px"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: 10
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QInput/InputTypes.vue b/docs/src/examples/QInput/InputTypes.vue
@@ -13,8 +13,6 @@
         </template>
       </q-input>
 
-      <q-input v-model="number" filled type="number" hint="Number" />
-
       <q-input v-model="email" filled type="email" hint="Email" />
 
       <q-input v-model="search" filled type="search" hint="Search">
@@ -41,8 +39,6 @@ export default {
       password: '',
       isPwd: true,
 
-      number: null,
-
       email: '',
       search: '',
       tel: '',

diff --git a/docs/src/pages/vue-components/input.md b/docs/src/pages/vue-components/input.md
@@ -77,6 +77,12 @@ Support and behavior is the subject entirely of the browser rendering the page a
 Some input types (like `date` or `time`) always render some controls, so you if you're using a `label` then you might want to set it along with `stack-label`, otherwise the label will overlap native browser controls.
 :::
 
+#### Input of number type
+
+You'll be using `v-model.number` (notice the `number` modifier) along with `type="number"` prop:
+
+<doc-example title="Input of number type" file="QInput/InputTypeNumber" />
+
 #### Input of file type
 
 ::: warning