如何在页面加载时验证v-data-table中的v-form？

Question

我使用v-data-table构建了以下数据输入表单，每列包含一个v-form和v-text-field，以便可以直接在表单中更新值。我想验证页面加载时的每个字段，以指示先前输入的数据不正确的任何地方。我无法让所有字段在加载时进行验证。我尝试为每个表单列添加一个ref并在validate()函数中调用mounted()函数，但这仅在页面加载时验证第一行。我还尝试了几种验证表单加载事件中表单的方法（例如v-form @load="this.validate()"）。如何修改我的代码以在页面加载时验证整个数据表？

表格

代码

模板

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

打字稿

mounted() {
    (this.$refs.disbursable_form as any).validate();
    (this.$refs.pending_transfer_form as any).validate();
  }

Answer 1

这就是我最终解决它的方式。我将<v-form>移到了<v-data-table>的外面，并添加了两秒钟的延迟来调用validate()函数。

代码

模板

<v-card max-width="95%">
    <v-card-title>Collateral</v-card-title>
    <v-form ref="collateral_form">
        <v-data-table
          :items="this.$store.state.CurrentInstrumentDetails.collateral"
          :headers="headers"
        >
          .
          .
          .
        </v-data-table>
    </v-form>
</v-card>

打字稿

mounted() {
  setTimeout(() => {
    (this.$refs.collateral_form as any).validate();
  }, 2000); 
}