vue의 형식 지정 - 속성 'validate'가 'Vue | 요소 | 부[] | 요소[]'에 존재하지 않음

vue의 형식 지정 - 속성 'validate'가 'Vue | 요소 | 부[] | 요소[]'에 존재하지 않음

내가 만들었다v-form이것처럼.

<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

내가 만약console.log(this.$ref.form)유효성 검사 함수를 사용할 수 있다.그런데 왜 건축하는 동안 이런 오류가 발생하는가?

솔루션:

단순:

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

---

설명:

에서Vue템플릿 구문, 우리는 다음을 사용할 수 있는ref의 탓으로 돌리다Vue인스턴스 또는 DOM 요소.만약ref에 사용되다v-for루프, 의 배열Vue인스턴스(instance) 또는 DOM 요소가 검색된다.

이래서다.this.$refs돌아올 수 있다Vue | Element | Vue[] | Element[].

을 위해TypeScript어떤 유형이 사용되고 있는지 알기 위해서는 가치를 부여해야 한다.

다음 중 하나를 수행해 보십시오.

(this.$refs.form as Vue).validate()또는(<Vue>this.$refs.form).validate()

우리는 그것을 하기로 결정했다.Vue때문에v-forma이다Vue인스턴스(구성 요소)가 아닌 인스턴스(구성 요소)Element.

개인 취향은 컴퓨터를 반환하는 계산된 속성을 만드는 것이다.Vue인스턴스(들) 또는 DOM 요소(들)가 이미 캐스트된 인스턴스(들)

즉

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

---

그v-form예에 a가 있다.validate부울을 반환하여 교차로 유형 리터럴을 사용해야 하는 방법:

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

그러면 우리는 이렇게 사용할 수 있다:this.form.validate()

---

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

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

그런 다음 구성 요소로 가져오기:

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

사용한다면vue-class-component와 함께vue-property-decorator이렇게 하면 된다.

정의 위치types.tsvuetify 양식 함수가 있는 new Type:

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();

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

그 대답들 중 아무도 해내지 못했다.나는 양식에 대해 작업하기로 한 그 당시 약속의 유효성을 얻으려고 노력하고 있었다.

코멘트대로

다음을 사용하여 typecript에서 vue 구성 요소를 작성하는 경우

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="양식"을 아주 잘 검증한다.

StackOverflow가 처음이라 승인된 솔루션에 대해 코멘트를 할 수 없으며, 이에 대한 솔루션을 제공하고자 함.OP와 같은 초기 단계를 밟아 조사를 했다.console.log(this.$ref.form), 콘솔의 출력은 실제로 [VueComponent]의 배열이며validate()함수는 그런 맥락에서 존재하지 않는다.

나는 그 집에 접근할 수 있었다.validate()을 함으로써 형식에 따라 하다this.$ref.form[0].validate()

참조URL: https://stackoverflow.com/questions/52109471/typescript-in-vue-property-validate-does-not-exist-on-type-vue-element