web-dev-qa-db-ja.com

タイプスクリプトvue-タイプ 'Vue | Element | Vue [] | Element []'にプロパティ 'validate'は存在しません。

このように_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)だけの場合、validate（）関数が使用可能です。しかし、ビルド中にこのエラーが発生するのはなぜですか？

typescriptvue.jsvuetify.js
9
Sam

ソリューション：

シンプル：

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

代替​​（コンポーネントでthis.$refs.formを複数回参照する場合はこれを使用）：

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

再利用可能（アプリケーション全体でv-formコンポーネントを複数回使用する場合はこれを使用）：

// 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インスタンスまたはDOM要素のVue属性を使用できます。 refがv-forループで使用されている場合、VueインスタンスまたはDOM要素の配列が取得されます。

これが、this.$refsがVue | Element | Vue[] | Element[]を返すことができる理由です。

TypeScriptがどのタイプが使用されているかを知るために、値をキャストする必要があります。

次のいずれかを実行できます。

(this.$refs.form as Vue).validate()または(<Vue>this.$refs.form).validate()

v-formはVueではなくVueインスタンス（コンポーネント）であるため、Elementにキャストします。

私の個人的な好みは、既にキャストされたVueインスタンスまたはDOM要素を返す計算プロパティを作成することです。

すなわち。

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

v-formインスタンスには、ブール値を返す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
  }
}
20
Ricky
let form: any = this.$refs.form
if(form.validate){}
3
wuyuchao

StackOverflowを初めて使用し、これに対するソリューションを提供したかったため、受け入れられたソリューションについてコメントできませんでした。 OPと同じ最初のステップを調査してconsole.log(this.$ref.form)を実行しました。コンソールの出力は実際には[VueComponent]の配列であり、validate()関数はそのコンテキストに存在しません。

validate()を実行することで、フォームのthis.$ref.form[0].validate()関数にアクセスできました

0
Ralph Gliane