vuelidate + vue + TS 项目配置

vuelidate + vue + TS 项目配置：三步走

 

npm i @types/vuelidate --save-dev

您也可以尝试删除node_modules dir和.lock文件并运行npm install

 

1.

// registerComponentHooks.ts

import { Component } from "vue-property-decorator"

 

Component.registerHooks(["validations"])

 

2.

// main.ts

import Vue from "vue"

import Vuelidate from "vuelidate"

import "./registerComponentHooks” // 放在Vue之前

 

Vue.use(Vuelidate)

// ...

 

3.

and sample component:

<template>

  <b-form>

    <b-form-group>

      <label form="diplay-name">Diplay name</label>

      <b-form-input id="display-name" v-model.trim="$v.modifiedAccount.displayName.$model" type="text"></b-form-input>

    </b-form-group>

  </b-form>

</template>

 

<script lang="ts">

import { Component, Prop, Vue } from "vue-property-decorator"

import { required } from "vuelidate/lib/validators"

import { Account, AccountModify } from "@/store/modules/accounts/models"

 

@Component

export default class AccountModifyForm extends Vue {

  @Prop() readonly account: Account

 

  private modifiedAccount: AccountModify = null

 

  created() {

    this.modifiedAccount = {

      displayName: this.account.displayName,

      email: this.account.email

    }

  }

 

  validations() {

    return {

      modifiedAccount: {

        displayName: { required }

      }

    }

  }

}

</script>