Как подружить Vuelidate с Typescript

Question

package.json

    "dependencies": {
        "vuelidate": "^0.7.5",
    },
    "devDependencies": {
        "@types/vuelidate": "^0.7.13",

подключение в main.ts

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/axios";
import Vuelidate from 'vuelidate';

Vue.config.productionTip = false;
Vue.use(Vuelidate);

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount("#app");

Template(lang='pug')

body.body
 .body__content
  .body__content-login
    label(for='email') Email
    input(name='email', type='email', id='email', v-model.trim='$v.email.$model', 
        v-bind:class='{invalid: ($v.email.$dirty && !$v.email.$required) || ($v.email.$dirty && !$v.email.$email)}') 
  .body__content-password
    label(for='password') Пароль
    input(name='password', type='password', id='password', v-model.trim='$v.password.$model')
footer.footer
 button.login-button(type="submit", @click='login()') Войти

Скрипт

import { required, minLength, email } from "vuelidate/lib/validators";
import { validationMixin } from "vuelidate";

@Component
export default class Login extends Vue {
  mixins = [validationMixin];
  email = "";
  password = "";

  validations = {
    email: { email, required },
    password: { required, minLength: minLength(6) }
  };

  login() {
    if (this.$v.$invalid) {
      this.$v.$touch();
      return;
    }
  }

Линтер выдает следующую ошибку: Property '$v' does not exist on type 'Login'.

Answer 1

Если Вы используете сторонние библиотеки вместе с Typescript, то Вам нужно скачать и установить их типы в список зависимостей Вашего проекта или, если авторы библиотеки не поддерживают Typescript, то прописать их самостоятельно.

npm install --save @types/vuelidate

Так же убедитесь что Вы определили $v из под App.js

Answer 2

Вы не подключили миксин с vuelidate.

import { validationMixin } from 'vuelidate';

export default {
  mixins: [validationMixin]
}

Вот пример из боевого проекта:

import { validationMixin } from 'vuelidate';
import { required, minLength, email } from 'vuelidate/lib/validators';

export default Vue.extend({
  mixins: [validationMixin],

  data() {
    return {
      email: '',
      password: '',
    };
  },

  validations: {
    email: {
      email,
      required,
    },
    password: {
      required,
      minLength: minLength(8),
    },
  },

  methods: {
    submit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        this.signIn();
      }
    },
  },
});

Возможно ошибка из-за декоратора, у vuelidate очень криво типы написаны.

БЛОГ НА HUSL

Как подружить Vuelidate с Typescript

Ответы (2 шт):