In my data entry form, I have utilized a v-data-table with each column containing a v-form and v-text-field for direct value updates. My goal is to validate all fields upon page load to identify any incorrect data inputs. However, I am facing challenges in achieving this comprehensive validation on load. I attempted to add a ref for each form column and then call the validate() function within the mounted() function, but only the first row gets validated upon page load. Additionally, I experimented with validating the form during the form load event (e.g. v-form @load="this.validate()"). How can I adjust my code to ensure that the entire data table is validated when the page loads?
Form
https://i.sstatic.net/zH44j.png
Code
Template
<v-card max-width="95%">
<v-card-title>Collateral</v-card-title>
<v-data-table
:items="this.$store.state.CurrentInstrumentDetails.collateral"
:headers="headers"
>
<template v-slot:item.disbursable="{ item }">
<v-container>
<v-row>
<v-spacer />
<v-col cols="5">
<v-form ref="disbursable_form">
<v-text-field
type="text"
class="justify-center"
dense
:value="item.disbursable"
:rules="calculatedFieldValidations"
@change="
valueChanged(
item.collateral_balance_id,
'disbursable',
$event
)
"
></v-text-field>
</v-form>
</v-col>
<v-spacer />
</v-row>
</v-container>
</template>
<template v-slot:item.pending_transfer="{ item }">
<v-container>
<v-row>
<v-spacer />
<v-col cols="5">
<v-form ref="pending_transfer_form">
<v-text-field
type="text"
class="justify-center"
dense
:value="item.pending_transfer"
:rules="calculatedFieldValidations"
@change="
valueChanged(
item.collateral_balance_id,
'pending_transfer',
$event
)
"
></v-text-field>
</v-form>
</v-col>
<v-spacer />
</v-row>
</v-container>
</template>
</v-data-table>
</v-card>
Typescript
mounted() {
(this.$refs.disbursable_form as any).validate();
(this.$refs.pending_transfer_form as any).validate();
}