Почему валидация не работает как нужно Vuetify?

Question

[Игорь]

Когда ввожу в строку больше 3 чисел все равно выбивается ошибка.

<script type="text/x-template" id="app-template">
  <v-app>
    <v-text-field
              label="Working time"
              v-model.number="workingTime"
              variant="outlined"
              hide-details="auto"
              class="my-2"
              :rules="inputsRules"
              required
            />
  </v-app>
</script>

<div id="app"></div>

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data () {
    return {
        workingTime: "",
        inputsRules: [
          (value) => value.length <= 3 || " Error",
          (value) => !!value || "Required",
        ],
    }
  },
 
}).use(vuetify).mount('#app')

https://codepen.io/invex0811/pen/zYRdMxM

Comments

[0xD34F]

всё работает

[Игорь]

0xD34F, но когда я ввожу больше 3 чисел все равно выбивается ошибка

[0xD34F]

Игорь, предлагаю вам включить голову и попытаться осознать разницу между "не работает" и "работает не так, как я задумал". Затем, после осознания, исправить вопрос.

[Игорь]

0xD34F, включил, исправил, прошу прощения

[0xD34F]

Игорь, лучше не стало. "Не работает как нужно" - а КАК нужно? Предлагаете угадать? Повторяю, голову включите.

Answer 1

[Артём Силантьев]

value это число, а у числа нет длины, надо в начале конвертировать value в строку, чтобы сделать проверку на длину:
https://codepen.io/artyomsilantiev/pen/jOZGOEL