为 vuetify 表单创建反应式规则

Question

我正在努力让我的 vuetify 表单按预期运行。我试图在点击提交后验证我的表单而不刷新，但我的两个组件也依赖于另一个。有一个选择框，如果从列表中选择一个或另一个条目，则文件输入的规则将更改为仅 pdf 和单个条目。我不确定如何让它发挥作用，因为现在表单不会根据这些动态规则进行验证。

            <v-form ref="uploadForm" v-model="uploadDocumentValidation" @submit.prevent>
          <v-card-text>
            <div class="text-medium-emphasis mb-4">
              This operation will upload a doucument into ARMs.
            </div>

            <v-select
              v-model="uploadTypeModel"
              :items="cleanAllowableUploadTypes"
              item-title="name"
              label="File category uploading"
              :counter="300"
              class="mb-2 mt-5"
              variant="outlined"
              validate-on="submit"
              return-object
              :rules="objectRequiredRule"
            ></v-select>
            <v-file-input
                    v-model="filesToUploadModel"
                    :show-size="1000"
                    color="primary"
                    label="File(s)"
                    placeholder="Select your file(s)"
                    prepend-inner-icon="mdi-file"
                    prepend-icon=""
                    variant="outlined"
                    validate-on="submit"
                    counter
                    comfortable
                    :multiple="uploadTypeModel != null && (uploadTypeModel.name == 'Revised Certification' || uploadTypeModel.name == 'Addendum') ? false : true"
                    :rules="uploadTypeModel != null && (uploadTypeModel.name == 'Revised Certification' || uploadTypeModel.name == 'Addendum') ? certificationOrAddendumRule : arrayRequiredRule"
                    :accept="uploadTypeModel != null && (uploadTypeModel.name == 'Revised Certification' || uploadTypeModel.name == 'Addendum') ? '.pdf' : ''"
                  >
                    <template v-slot:selection="{ fileNames }">
                      <template v-for="(fileName) in fileNames" :key="fileName">
                        <v-chip
                          class="me-2"
                          color="blue-accent-4"
                          size="small"
                          label
                        >
                          {{ fileName }}
                        </v-chip>
                      </template>
                    </template>
                  </v-file-input>

            <div class="text-overline mb-2">HELPFUL INFORMATION</div>

            <div class="text-medium-emphasis mb-1">
              All files uploaded are stored in the cloud with redundant backups of each version.
            </div>
          </v-card-text>

          <v-divider class="mt-2"></v-divider>

          <v-card-actions class="my-2 d-flex justify-end">
            <v-btn
              class="text-none px-5"
              rounded="xl"
              text="Cancel"
              @click="isActive.value = false"
            ></v-btn>

            <v-btn
              class="text-none mr-3 my-3 px-5"
              color="primary"
              rounded="xl"
              text="Upload"
              variant="flat"
              @click="uploadFiles()"
              type="submit"
            ></v-btn>
          </v-card-actions>                        
        </v-form>

我的脚本如下

      const certificationOrAddendumRule = [
  (v: any) => !!v || "File is required!",
  (v: any) => v.type != 'application/pdf' || "File must be a pdf!",
  (v: any) => !v.isArray || "Only one document allowed for this type of upload!"]

我的验证函数如下：

  const uploadFiles = () => {
uploadForm.value.validate().then(async (result: any) => {
  if(result.valid == true) {
    if(uploadDocumentValidation.value && certificationReviewModel.value != null)
    {
      loadingFileUpload.value = true
      switch (uploadTypeModel.value.name) {
        case 'Revised Certification':
          await documentStore.uploadRevisedCertification(certificationReviewModel.value!.mmcid,filesToUploadModel.value!)
          break;
        case 'Addendum':
          await documentStore.uploadAddendum(certificationReviewModel.value!.mmcid,filesToUploadModel.value!)
          break;
        case 'Supporting Document':
          await documentStore.uploadSupportingDocuments(certificationReviewModel.value!.mmcid,filesToUploadModel.value!)
          break;
        case 'Contract':
          await documentStore.uploadContractDocuments(certificationReviewModel.value!.mmcid,filesToUploadModel.value!)
          break;
        case 'ILOS Document':
          await documentStore.uploadIlosDocuments(certificationReviewModel.value!.mmcid,filesToUploadModel.value!)
          break;
        case 'Miscellaneous':
          await documentStore.uploadMiscellaneousDocuments(certificationReviewModel.value!.mmcid,filesToUploadModel.value!)
          break;
        case 'DMCP Working File':
          await documentStore.uploadDMCPWorkingDocuments(certificationReviewModel.value!.mmcid,filesToUploadModel.value!)
          break;
        default:
          console.log('error')
      }
      await certificationReviewStore.loadCertificationReview(certificationReviewModel.value!.mmcid)
      loadingFileUpload.value = false    
    }  
  }
})

}

Answer 1

将规则放入计算属性中。

如果仍然没有帮助，请将代码粘贴到验证表单的位置。

computed: {
  certificationOrAddendumRule() {
    return [
      (v: any) => !!v || "File is required!",
      (v: any) => v.type != 'application/pdf' || "File must be a pdf!",
      (v: any) => !v.isArray || "Only one document allowed for this type of upload!"
    ];
  }
}