Сделать правило Vuetify для числа от 0 до 999 или нет ввода

Question

У меня есть правило, которое проверяет, находится ли число на входе между 0 и 999, оно работает нормально. Проблема в том, что если я ввожу неправильное значение, например a, и удаляю его, у меня все равно будет отображаться ошибка даже для пустого ввода.

Должно быть какое-то простое решение, я просто не могу его найти сейчас.

Я оставил только важные части кода.

<v-text-field 
type="number"
:rules="numberRule"/>

// Vue component
data: () => ({
numberRule: [v => (!isNaN(parseFloat(v)) && v >= 0 && v <= 999) || 'Number has to be between 0 and 999']
})

Answer 1

Вышеупомянутый код выглядит хорошо, я добавил исправления к вашему требованию

Рабочий код: https://codepen.io/chansv/pen/ZEEeVoW?editors=1010

Свойство rules в текстовом поле vuetify ожидает массив логических значений или строку, если логическое значение true, тогда проверка пройдена, если она находит какую-либо строку, она отображается как сообщение об ошибке

Я добавила исправления в numberRule , чтобы сначала проверить, является ли значениебез ввода, он не будет отображать какое-либо сообщение об ошибке, затем проверяет число от 0-999, если проходит, то нет сообщения об ошибке, если не проходит оба случая, отображается сообщение об ошибке

<v-text-field
 label="Regular"
 :rules="[numberRule]"
></v-text-field>

ВСкрипт:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    numberRule: v  => {
      if (!v.trim()) return true;
      if (!isNaN(parseFloat(v)) && v >= 0 && v <= 999) return true;
      return 'Number has to be between 0 and 999';
    },
  }
})