vue의 유형 스크립트 - 'validate' 속성이 'Vue | Element | Vue[] | Element[]' 유형에 없습니다.

vue의 유형 스크립트 - 'validate' 속성이 'Vue | Element | Vue[] | Element[]' 유형에 없습니다.

나는 이렇게 창조했다

<v-form ref="form" v-model="valid" lazy-validation>
  ...
  <v-btn
     :disabled="!valid"
     @click="submit"
   >
     submit
   </v-btn>
</v-form>

스크립트:

if (this.$refs.form.validate()) // Error is in here

validate() 기능만 사용할 수 있는 경우. 그런데 왜 이런 오류가 생기는 걸까요?

---

솔루션:

단순:

(this.$refs.form as Vue & { validate: () => boolean }).validate()

대안:

computed: {
  form(): Vue & { validate: () => boolean } {
    return this.$refs.form as Vue & { validate: () => boolean }
  }
} // Use it like so: this.form.validate()

재사용 가능:

// In a TS file
export type VForm = Vue & { validate: () => boolean }

// In component, import `VForm`
computed: {
  form(): VForm {
    return this.$refs.form as VForm
  }
}

---

설명:

템플릿 구문에서 인스턴스 또는 DOM 요소의 속성을 사용할 수 있습니다. 루프에서 사용되는 경우 인스턴스 또는 DOM 요소의 배열이 검색됩니다.

그래서 둘 중 하나가 돌아올 수 있는 것이다.

어떤 유형이 사용되고 있는지 알기 위해서는 값을 캐스팅해야 합니다.

다음 중 하나를 수행할 수 있습니다:

또는

이 인스턴스(구성 요소)이기 때문에 에 캐스팅했습니다.

내 개인적인 선호는 이미 캐스팅된 인스턴스 또는 DOM 요소를 반환하는 계산된 속성을 만드는 것이다.

예를 들면.

computed: {
  form(): Vue {
    return this.$refs.form as Vue
  }
}

---

인스턴스에 부울을 반환하는 메서드가 있으므로 교차 유형 리터럴을 사용해야 합니다:

computed: {
  form(): Vue & { validate: () => boolean } {
    return this.$refs.form as Vue & { validate: () => boolean }
  }
}

그러면 다음과 같이 사용할 수 있습니다:

---

더 나은 해결책은 교차점이 있는 유형을 만들어 여러 구성요소에서 재사용할 수 있도록 하는 것입니다.

export type VForm = Vue & { validate: () => boolean }

그런 다음 구성 요소로 가져옵니다:

computed: {
  form(): VForm {
    return this.$refs.form as VForm
  }
}

---

let form: any = this.$refs.form
if(form.validate){}

---

StackOverflow가 처음이라 이에 대한 솔루션을 제공하고 싶었기 때문에 수락된 솔루션에 대해 언급할 수 없었습니다. OP와 동일한 초기 단계를 수행하여 을 수행했는데, 콘솔의 출력은 실제로 [VueComponent]의 배열이며 기능은 해당 컨텍스트에 존재하지 않습니다.

나는 양식에 있는 기능에 접속할 수 있었다

---

아무도 하지 않았어요. 나는 검증을 받고 양식 작업을 약속하려고 노력하고 있었다.

에 따라

다음을 사용하여 유형 스크립트로 값 구성 요소를 작성하는 경우

export default Vue.extend({})

그럼 하다

import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import Vue, { VueConstructor } from "vue";
export default (Vue as VueConstructor<
  Vue & {
    $refs: {
      form: InstanceType<typeof ValidationProvider>;
    };
  }
>).extend({
  methods: {
    saveEntity() {
      if (this.loading) return;
      console.log(this.entity);
      this.$refs.form.validate().then(success => {
        if (!success) {
          console.log("not valid");
          return;
        }
        console.log("valid");
      });
    }
  }
})

그러면 ValidationObserver ref="form"이 올바르게 검증됩니다.

---

와 함께 사용하면 다음과 같이 수행할 수 있습니다:

vuetify 폼 기능을 사용하여 새 유형을 정의합니다:

export type VForm = Vue & {
  validate: () => boolean;
  resetValidation: () => boolean;
  reset: () => void;
};

그런 다음 구성 요소로 가져옵니다:

import { VForm } from "types";
import { Component, Ref} from "vue-property-decorator";

구성 요소에서 @Ref를 사용하여 양식을 정의합니다:

export default class YourComponent extends Vue {
  @Ref("form") readonly form!: VForm;
}

따라서 다음과 같이 사용할 수 있습니다:

this.form.validate();
this.form.resetValidation();
this.form.reset();

---

유형 스크립트가 있는 vue 3의 경우 다음과 같은 작업이 가능했습니다:

<script setup lang="ts">
import { VForm } from 'vuetify/components'
import { ref } from 'vue';

const form = ref(VForm); // here I just put the type of the form. 

const logUser = async () => {
  const { valid } = await form.value.validate()
  console.log("The form is:", valid);
}

</script>