Как добавить проверку к указанным c элементам в массиве, которые отображаются на странице, используя для l oop?

Question

Я работаю в Vue JS (используя платформу Vuetify), чтобы создать форму:

    <v-text-field 
        v-for="items in itemsArray"
        :key="items.id"
        v-model="items.data"
        :label="items.name"
    ></v-text-field>

Вот как выглядит itemArray:

    data: () => ({
        itemsArray: [
            {id: 6, name: 'Name'},
            {id: 1, name: 'Email'},
            {id: 17, name: 'Age'},
            {id: 3, name: 'Height'},
            {id: 4, name: 'Contact Number'},
        ],
    }),

Как я могу добавить проверку для определенных c элементов в массиве? Например, я хочу, чтобы элемент с id: 4 и именем «Контактный номер» имел максимум 8 символов, и эти символы могут быть только цифрами.

Я проверил документы Vuetify, однако это не так. Не объясните, как вы можете проверить, когда элементы отображаются на странице, используя для l oop

Answer 1

Попробуйте добавить правила проверки к элементу, который вы хотите проверить, следующим образом:

 itemsArray: [
            {id: 6, name: 'Name'},
            {id: 1, name: 'Email'},
            {id: 17, name: 'Age'},
            {id: 3, name: 'Height'},
            {id: 4, name: 'Contact Number',rules:{required: value => !!value || 'Required.', counter: value => value.length <= 8 || 'Max 8 characters'}},
        ]

и в шаблоне:

  <v-text-field 
        v-for="items in itemsArray"
        :key="items.id"
        v-model="items.data"
        :label="items.name"

:rules='items.rules?Object.values(items.rules):[]'

    ></v-text-field>

проверьте это ручка