使用Vuetify数据表上的ValidationObserver定位特定行

问题描述

基本上，我有一个ValidationObserver包裹在v数据表周围，并带有一个调用validate的按钮。因此，当您按下验证按钮时，我希望它仅检查按钮被按下的行上的验证，而改为检查所有行。

这里是我尝试做的事情的精简版，但仍然反映了问题

   <ValidationObserver mode="passive" v-slot="{ validate }">
      <v-data-table
        :headers="headers"
        :items="items"
      >
        <template slot="item.postcode" slot-scope="{ item }">
          <ValidationProvider
            rules="required"
            :vid="`postcode${items.indexOf(item)}`"
            v-slot="{ errors }"
          >
            <v-text-field
              :error-messages="errors"
              v-model="item.postcode"
              class="mb-1"
              placeholder="Postcode"
              hide-details
              dense
            ></v-text-field>
          </ValidationProvider>
        </template>
       
        <template slot="item.actions" slot-scope="{ item }">
          <JobValidationTableAction
            @validate="validate()"
          ></JobValidationTableAction>
        </template>
      </v-data-table>
    </ValidationObserver>

解决方法

每个ValidationProvider（VP）也具有validate函数。如果您给副总裁一个参考，然后致电$refs['vp'+item.index].validate()怎么办？

      <ValidationProvider
        rules="required"
        :vid="`postcode${items.indexOf(item)}`"
        v-slot="{ errors }"
        :ref="'vp'+item.index"
      >
    <!-- ... -->
    <template slot="item.actions" slot-scope="{ item }">
      <JobValidationTableAction
        @validate="$refs['vp'+item.index].validate()"
      ></JobValidationTableAction>
    </template>