javascript - 如何使用 VeeValidate (Vue.Js) 上的字典为 ValidationProvider 自定义 “required” 错误消息

Question

当我的组件 MyInput 具有“cpf”规则未填充时(换句话说，当组件具有 “cpf” 时)，我想更改错误消息规则不满足“必需”规则)。

我认为带有自定义消息的“字典方法”应该可以完成这项工作，但我无法让它发挥作用。

使用下面的代码，显示的错误消息是“O Campo cpf é obrigatório”。我想在下面的字典字典中显示该消息(“Favor preencher o cpf”)。我认为由于某种原因字典没有被考虑

在我的ma​​in.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

Answer 1

像这样传递你的字典，它应该可以工作:

const dict = {
  messages: ptBR.messages,
  pt_BR: {
    custom: {
      cpf: {
        required: 'Favor preencher o cpf',
      },
    }
  },
};
Vue.use(VeeValidate, {
  locale: 'pt_BR',
  dictionary: dict
});