【问题标题】：How do I validate v-forms within a v-data-table on page load?如何在页面加载时验证 v-data-table 中的 v-forms？
【发布时间】：2020-03-18 15:46:30
【问题描述】：

我使用v-data-table 构建了以下数据输入表单，每列包含v-form 和v-text-field，以便可以直接在表单中更新值。我想验证页面加载时的每个字段，以指示先前输入的数据不正确的任何地方。我无法让所有字段在加载时进行验证。我尝试为每个表单列添加ref 并在mounted() 函数中调用validate() 函数，但这仅验证页面加载时的第一行。我还尝试了几种在表单加载事件中验证表单的变体（例如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();
  }

【问题讨论】：

标签： typescript vue.js vuetify.js

【解决方案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); 
}

【讨论】：