Есть ли в Vuetify конкретный компонент ввода чисел?

Обновлять: этот ответ относится к версии 1 Vuetify, ответ Юкашимы Хуксая верен для более новых версий Vuetify.

Установка атрибута type на type = "number" - лучший способ.

Оригинал:

Вы можете просто сделать свой собственный:

new Vue({ 
  el: '#app',
  data () {
     return {
       foo: 0
     }
  },
  methods: {
    increment () {
      this.foo = parseInt(this.foo,10) + 1
    },
    decrement () {
      this.foo = parseInt(this.foo,10) - 1
    }
  }
})

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel = "stylesheet">
<link href = "https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id = "app">
    <v-app>
      <v-content>
        <v-container>
          <v-text-field v-model = "foo" type = "number" label = "Number" append-outer-icon = "add" @click:append-outer = "increment" prepend-icon = "remove" @click:prepend = "decrement"></v-text-field>
        </v-container>
      </v-content>
    </v-app>
  </div>

Код Vue vuetify используя: rules = "maxRules"

<template>
  <div>
    <v-text-field  v-model = "text1" :rules = "maxRules" label = "Credit Amount"></v-text-field>
  </div>
</template>

<script>

export default {
  data () {
    return {
      limit:500,
      maxRules: [
        (v)=> {
          if (this.text1 > this.limit) {
            return 'Error'
          }
        }
      ]
    }
  }
}
</script>

Да, есть:

<v-text-field
  v-model = "numberValue"
  hide-details
  single-line
  type = "number"
/>

Посмотрите документация по компонентам слайдера для рабочего примера.

в vuetify.js v2.2.22 для преобразования вашего <v-text-field> в номер нужно записать v-model.number

<v-text-field 
v-model.number = "foo" 
label = "Number" 
append-outer-icon = "add" 
@click:append-outer = "increment" 
prepend-icon = "remove" 
@click:prepend = "decrement">
</v-text-field>

type = "число" был удален

Здесь смешиваются некоторые концепции числового ввода.

1. Я не вижу, чтобы type = "число" удалялся в 2.2.22 https://github.com/vuetifyjs/vuetify/compare/v2.2.21...v2.2.22 Также я вижу, что он отображается правильно, по крайней мере, в 2.3.10

2. Поле ввода с атрибутом type = "number" будет обрабатываться по-разному в зависимости от браузера, ОС и настроек локали (например, я все еще могу вводить свободный текст в FF, но не в Chrome). Обычно на смартфонах раскладка клавиатуры меняется.

3. v-model.number - это чисто директива для Vue. Как видите, внутри Vue просто пытается проанализировать ввод с помощью parseFloat и использует его в случае успеха - в противном случае это будет текст и обрабатываться как строка в Vue / JS. https://vuejs.org/v2/guide/forms.html#number