Boa tarde. Segue a solução para os colegas de classes que estejam utilizando a ultima versão do validate até esta data. Note que a estrutura mudou um pouco comparando com o que foi ensinado na video aula, todavia, no final se obtem o mesmo resultado =)
No meu projeto, esta são as versões das dependencias utilizadas...
"dependencies": {
"vee-validate": "^3.3.5",
"vue": "^2.5.11",
"vue-resource": "^1.5.1",
"vue-router": "^3.3.4"
},Após baixar via NPM o VeeValidate, importe-o no arquivo main.js
import { ValidationProvider, extend, ValidationObserver } from 'vee-validate';Explicação: ValidationProvider é o componente em si do validador; O extend provém os métodos/tipos de validação Ex.:min, max, required; ValidationObserver será usado no momento do clique do botao 'gravar' pelo usuario. [Em outras palavras, só será gravado se tds as validações estiverem OK]
Abaixo, o código referente aos tipos de validações...
extend('required', {
validate (value) {
return {
required: true,
valid: ['', null, undefined].indexOf(value) === -1
};
},
computesRequired: true,
message: 'Este campo é obrigatório!'
});
/* Ou... Vc pode fazer o required assim. Neste caso, é necessario importa-lo de rules.
import { required} from 'vee-validate/dist/rules';
extend('required', {
...required,
message: 'This field is required'
}); */
extend('minmax', {
validate(value, { min, max }) {
return value.length >= min && value.length <= max;
},
params: ['min', 'max'],
message:'O campo {_field_} deve possuir no mínimo {min} e no máximo {max} caracteres.'
});Por fim, registre-o os componentes globalmente... [È assim q vc vai poder usar as tags no template
//tais componentes serao usados como TAGS nos templates!
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);