时间戳

首页 > 解决方案 > 如何向使用 for 循环呈现到页面的数组中的特定项目添加验证？

javascript - 如何向使用 for 循环呈现到页面的数组中的特定项目添加验证？

问题描述

我正在使用 Vue JS（使用 Vuetify 框架）来创建一个表单：

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

这是 itemsArray 的样子：

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

如何向数组中的特定项目添加验证？例如，我希望它具有 id: 4 和名称 'Contact Number' 的项目最多有 8 个字符，这些字符只能是数字。

我已经检查了 Vuetify 文档，但是它没有解释如何验证何时使用 for 循环将项目呈现到页面

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

尝试将验证规则添加到要验证的项目，如下所示：

 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>

请检查这支笔

推荐阅读