1

我似乎无法在 Vuelidate 的文档中找到如何验证整个模型（包括子组件）。验证父组件和每个子组件都不是问题，但是我找不到使用validations父组件中的结构来验证子组件的方法。

我假设必须将某些东西作为道具传递给子组件。

我在 SO 上发现了一个类似的问题，但答案似乎并不完整，不幸的是它没有帮助。

父组件：

validations: {
    payload: {
        name: {
            required,
            minLength: minLength(5)
        },
        description: {
            required,
            minLength: minLength(20)
        },
        // I assume that this should work if I want to perform validation from the parent component
        blocks: {
            $each: {
                priority: {
                    required,
                    integer,
                    between: between(-999, 999)
                },
                maxProcessed: {

                    minValue: minValue(1)
                },
                startTime: {
                    required,
                    isTime
                }
            }
        }
    }
}

父组件模板（为简洁起见省略部分代码）

                    <div class="message-body">
                        <block  v-for="block in payload.blocks"
                               :key="block.id"
                               :type="'TEMPLATE'"
                               :block="block"
                               :selectedBlockId="selectedItem.block"
                               @selectBlock="selectBlock"
                               @removeBlock="removeBlock"></block>
                    </div>

子组件模板（为简洁起见省略部分代码）

    <div class="field">
        <div class="control has-icons-left has-icons-right">
            <input class="input is-small" type="text" placeholder="z.B. 300"
                   :class="{'is-danger':$v.block.priority.$invalid}" v-model="block.priority">
            <span class="icon is-left">
                <i class="fas fa-exclamation"></i>
            </span>
        </div>
        <p class="help is-danger" v-if="!$v.block.priority.required">Priority is required</p>
        <p class="help is-danger" v-if="!($v.block.priority.between && $v.block.priority.integer)">Priority has to be a number between -999 and 999</p>
    </div>

子组件（带有子组件内的验证逻辑）

props: {
        block: {
            type: Object,
            required: true
        }
    },
    validations: {
        block: {
            priority: {
                required,
                integer,
                between: between(-999, 999)
            },
            maxProcessed: {

                minValue: minValue(1)
            },
            startTime: {
                required,
                isTime
            }
        }
    }
4

0 回答 0