Как настроить «обязательные» сообщения об ошибках для ValidationProvider с помощью словаря в VeeValidate (Vue.Js)

Я хотел бы изменить сообщение об ошибке, когда мой компонент MyInput с правилом "cpf" не заполнен (другими словами, когда компонент с правилом "cpf" не не удовлетворяют правилу "required").

Я думаю, что «метод словаря» с пользовательскими сообщениями должен работать, но я не смог заставить его работать.

При использовании приведенного ниже кода отображается сообщение об ошибке «O campo cpf é obrigatório». Я хотел бы отобразить сообщение в словаре ниже ("Favor preencher o cpf"). Я думаю, что словарь не был рассмотрен по какой-то причине

В моем main.js есть следующий код:

import Vue from 'vue';
import App from './App.vue';
import './core/extensions';

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

И на extensions.js:

import Vue from 'vue';
import VeeValidate, { Validator } from 'vee-validate';
import ptBR from 'vee-validate/dist/locale/pt_BR';

const dict = {
   messages: ptBR.messages,
   pt_BR: {
     custom: {
        cpf: {
          required: 'Favor preencher o cpf',
        },
      }
    },
  };

Vue.use(VeeValidate);

Validator.localize({ pt_BR: dict })

Validator.extend('cpf', (val) => {
     return false //just to test
});

App.vue (простой пример):

<template>
    <div id="app">
     <ValidationObserver ref="observer">
         <ValidationProvider ref="cpfinput" rules="cpf" name="CPF">
            <myInput
              slot-scope="{ errors }"
              :errorProp="errors"
              name="cpf"
            />
          </ValidationProvider>
      </ValidationObserver>    
    </div>
</template>

Я использую vee-validate 2.1.5 и vue 2.5.17


javascript vue.js vuejs2 vee-validate
person Thiago Benine    schedule 10.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Передайте свой словарь следующим образом, он должен работать:

const dict = {
  messages: ptBR.messages,
  pt_BR: {
    custom: {
      cpf: {
        required: 'Favor preencher o cpf',
      },
    }
  },
};
Vue.use(VeeValidate, {
  locale: 'pt_BR',
  dictionary: dict
});
person Sovalina    schedule 10.03.2019
comment
Используя ваше предложение, отображаемая ошибка отображается на английском языке (значение CPF недействительно), словарь, похоже, не работает. - person Thiago Benine; 10.03.2019
comment
Не могли бы вы предоставить JSFiddle рабочий пример, пожалуйста? - person Thiago Benine; 10.03.2019
comment
Конечно. Вот рабочая codesandbox. Возможно, ваша конфигурация намного сложнее, чем этот пример. - person Sovalina; 10.03.2019
comment
Спасибо! Для компонентного ввода мне подходит codesandbox.io/s/5xo48x1qkp. - person Thiago Benine; 19.03.2019