2

I can't seem to find in the Vuelidate's documentation how can the whole model (including child components) be validated. Validating parent component and each of the child components isn't a problem, but I couldn't find a way to validate child components using the validations structure in the parent component.

I assume that something has to be passed as a prop to the child component.

I found a similar question on SO, but the answer doesn't seem to be complete and unfortunately it didn't help.

Parent component:

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
                }
            }
        }
    }
}

Parent component template (parts of the code ommited for brevity)

                    <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>

Child component template (parts of the code ommited for brevity)

    <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>

Child component (with the validation logic within the child component)

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

                minValue: minValue(1)
            },
            startTime: {
                required,
                isTime
            }
        }
    }
wegelagerer
  • 3,600
  • 11
  • 40
  • 60

0 Answers0