Solucionado (ver solução)
Solucionado
(ver solução)
14
respostas

Tradução não é feita

Fiz os passos para tradução pro pt_BR, mas continua em inglês.

Seguem arquivos de como está:

main.js:

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

import VueResource from 'vue-resource';
import VueRouter from 'vue-router';

import VeeValidate from 'vee-validate';

// tem que vir entre chaves, porque não é default
import { routes } from './routes';

// importando o arquivo `Transform.js`.
import './directives/Transform';

//importar mensagens do VeeValidate em portugues
import msgBR from './pt_BR';


Vue.use(VueResource);
Vue.http.options.root = 'http://localhost:3000';

Vue.use(VueRouter);

Vue.use(VeeValidate, {
    locale: 'pt_BR',
    dictionary: { 
        pt_BR: { messages: msgBR }
    }
});


const router = new VueRouter({
  routes, 
  mode: 'history'
});


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

arquivo Cadastro.Vue:

<template>

  <div>
    <h1 class="centralizado">Cadastro</h1>
    <h2 class="centralizado">{{ foto.titulo }}</h2>

    <h2 v-if="foto._id" class="centralizado">Alterando...</h2>
    <h2 v-else class="centralizado">Incluindo...</h2>

    <form @submit.prevent="grava()">
      <div class="controle">
        <label for="titulo">TÍTULO</label>
        <input data-vv-as="Título da Foto" name="titulo" v-validate data-vv-rules="required|min:3|max:10" id="titulo" autocomplete="off" v-model="foto.titulo">
        <span  class="erro" v-show="errors.has('titulo')">{{ errors.first('titulo')}}</span>

      </div>

      <div class="controle">
        <label for="url">URL</label>
        <input data-vv-as="URL da Foto" name="url" v-validate data-vv-rules="required" id="url" autocomplete="off" v-model.lazy="foto.url">
        <span class="erro" v-show="errors.has('url')">{{ errors.first('titulo')}}</span>

        <imagem-responsiva v-show="foto.url" :url="foto.url" :titulo="foto.titulo"/>


      </div>

      <div class="controle">
        <label for="descricao">DESCRIÇÃO</label>
        <textarea id="descricao" autocomplete="off" v-model="foto.descricao"></textarea>
      </div>

      <div class="centralizado">
        <meu-botao rotulo="GRAVAR" tipo="submit"/>
        <router-link :to="{name: 'home'}"><meu-botao rotulo="VOLTAR" tipo="button"/></router-link>
      </div>

    </form>
  </div>
</template>

<script>

import ImagemResponsiva from '../shared/imagem-responsiva/ImagemResponsiva.vue'
import Botao from '../shared/botao/Botao.vue';
import Foto from '../../domain/foto/Foto.js';
import FotoService from '../../domain/foto/FotoService';


export default {

  components: {

    'imagem-responsiva': ImagemResponsiva, 
    'meu-botao': Botao
  },

  data() {

    return{ 
      foto: new Foto(),
      id: this.$route.params.id

      //resource: {}
    }
  } ,
  methods: {

    grava() {

      this.$validator
        .validateAll()
        .then(success => { 


          this.service
            .cadastra(this.foto)
            .then(() => {
              if(this.id) this.$router.push({ name: 'home'});
              this.foto = new Foto();

            }, err => console.log(err));


        });




    }
  }, 

  created() {

    this.service = new FotoService(this.$resource);

    if(this.id) {

      this.service
        .busca(this.id)
        .then(foto => this.foto = foto);

    }

  }


  }



</script>
<style scoped>

  .centralizado {
    text-align: center;
  }
  .controle {
    font-size: 1.2em;
    margin-bottom: 20px;

  }
  .controle label {
    display: block;
    font-weight: bold;
  }

 .controle label + input, .controle textarea {
    width: 100%;
    font-size: inherit;
    border-radius: 5px
  }

  .centralizado {
    text-align: center;
  }

  .erro {
    color: red;
  }

</style>

Arquivos da pasta SRC :

Portugal:src rito$ pwd
/Users/rito/CursoVueAlura/alurapic/src
Portugal:src rito$ 
Portugal:src rito$ ls -l
total 32
-rw-r--r--  1 rito  staff   785 30 Mar 13:22 App.vue
drwxr-xr-x  3 rito  staff   102 21 Mar 16:23 assets
drwxr-xr-x  5 rito  staff   170 22 Mar 19:25 components
drwxr-xr-x  3 rito  staff   102 23 Mar 12:31 directives
drwxr-xr-x  3 rito  staff   102 30 Mar 11:26 domain
-rw-r--r--  1 rito  staff   741  1 Abr 17:46 main.js
-rw-r--r--  1 rito  staff  2898  1 Abr 17:25 pt_BR.js
-rw-r--r--  1 rito  staff   505 30 Mar 13:33 routes.js
Portugal:src rito$

Conteúdo do arquivo pt_BR.js:

!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e.__locale__pt_BR=e.__locale__pt_BR||{},e.__locale__pt_BR.js=r())}(this,function(){"use strict";var e={after:function(e,r){var n=r[0];return"O campo "+e+" deve estar depois do campo "+n+"."},alpha_dash:function(e){return"O campo "+e+" deve conter letras, números e traços."},alpha_num:function(e){return"O campo "+e+" deve conter somente letras e números."},alpha_spaces:function(e){return"The "+e+" só pode conter caracteres alfabéticos e espaços."},alpha:function(e){return"O campo "+e+" deve conter somente letras."},before:function(e,r){var n=r[0];return"O campo "+e+" deve estar antes do campo "+n+"."},between:function(e,r){var n=r[0],o=r[1];return"O campo "+e+" deve estar entre "+n+" e "+o+"."},confirmed:function(e,r){var n=r[0];return"O campo "+e+" e "+n+" devem ser iguais."},credit_card:function(e){return"O campo "+e+" é inválido."},date_between:function(e,r){var n=r[0],o=r[1];return"O campo "+e+" deve estar entre "+n+" e "+o+"."},date_format:function(e,r){var n=r[0];return"O campo "+e+" deve estar no formato "+n+"."},decimal:function(e,r){void 0===r&&(r=["*"]);var n=r[0];return"O campo "+e+" deve ser numérico e deve conter "+("*"===n?"":n)+" casas decimais."},digits:function(e,r){var n=r[0];return"O campo "+e+" deve ser numérico e ter "+n+" dígitos."},dimensions:function(e,r){var n=r[0],o=r[1];return"O campo "+e+" deve ter "+n+" pixels de largura por "+o+" pixels de altura."},email:function(e){return"O campo "+e+" deve ser um email válido."},ext:function(e){return"O campo "+e+" deve ser um arquivo válido."},image:function(e){return"O campo "+e+" deve ser uma imagem."},in:function(e){return"O campo "+e+" deve ter um valor válido."},ip:function(e){return"O campo "+e+" deve ser um endereço IP válido."},max:function(e,r){var n=r[0];return"O campo "+e+" não deve ter mais que "+n+" caracteres."},max_value:function(e,r){var n=r[0];return"O campo "+e+" precisa ser "+n+" ou menor."},mimes:function(e){return"O campo "+e+" deve ser um tipo de arquivo válido."},min:function(e,r){var n=r[0];return"O campo "+e+" deve conter pelo menos "+n+" caracteres."},min_value:function(e,r){var n=r[0];return"O campo "+e+" precisa ser "+n+" ou maior."},not_in:function(e){return"O campo "+e+" deve ser um valor válido."},numeric:function(e){return"O campo "+e+" deve conter apenas números"},regex:function(e){return"O campo "+e+" possui um formato inválido."},required:function(e){return"O campo "+e+" é obrigatório."},size:function(e,r){var n=r[0];return"O campo "+e+" deve ser menor que "+n+" KB."},url:function(e){return"O campo "+e+" não é uma URL válida."}},r={name:"pt_BR",messages:e,attributes:{}};return"undefined"!=typeof VeeValidate&&VeeValidate&&(VeeValidate.Validator,!0)&&VeeValidate.Validator.addLocale(r),r});
14 respostas

Bom dia! :) Eu olhei, olhei, olhei e não vi nada de errado no seu código. Dai, peguei e coloquei seu main em um projeto que tenho pronto e tudo fico em português. Mistério! :)

O que pode ter acontecido é você ter copiado o arquivo para outra pasta, mas sabiamente você postou a estrutura do seu diretório.

Sendo assim, venho com uma pergunta básica, mas você experimentou parar o Vue CLI e tentar recarregar a página depois?

Você teve boa vontade de compartilhar bastante código, mas apenas com eles não fui capaz de descobrir, ainda. Meu chutão é que o Vue CLI não compilou toda a bagaça e você fez um teste com o App desatualizado.

Aguardo seu retorno.

Muito estranho. Eu já havia parado o server e iniciado-o novamente, mesmo assim nada ocorreu.

Hoje iniciando uma nova sessão e iniciando o server novamente o mesmo erro!

Mesmo buildando a Applicação e colocando ela no server e executando por lá também ocorre o erro.

Subi os arquivos no GitHub. Lá dá pra pegar o projeto completo:

https://github.com/rito/alurapic.git

Não deveria ocorrer, mas uma diferença do que fiz e não citei, é que na instalação dos pacotes, sempre peguei a última versão. Com isso, meu package.json ficou assim:

//package.json

{
  "name": "alurapic",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Jean Rito",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1",
    "vee-validate": "^2.0.0-beta.25",
    "vue": "^2.2.1",
    "vue-resource": "^1.2.1",
    "vue-router": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

Sinistro!

Hummmmm! Pode ser um bug da última versão com o VueValidate. Vou investigar no seu repo.

Estou olhando seu código. A mensagem de erro esta em inglês, mas nem é a correta para aparecer. Além disso, você viu que no seu console há um erro disparado na promise? Deu algum pau ai no registro da validação.

Vou fazer downgrade do seu projeto. Pode ser que o VeeValidade não suporte ainda o Vue 2.2!

Então, investigando. Quando deixo de importar a tradução, as mensagens em inglês são exibidas com sucesso. Já é uma coisa.

Agora, tenho que ver se é bug do VeeValidade com Vue 2.2.

solução!

Se você não tivesse falado que atualizou o Vue e as Libs eu ficaria horas e horas tentando achar o problema. É bug.

Aliás, no mundo do desenvolvimento, a última coisa que fazer é atualizar as libs ou módulos de um sistema. Quando um sistema é homologado, qualquer alteração tem que ser minuciosamente registrada e testada novamente para ver se não quebrou nada.

Então, você precisará apelar para outro plugin de validação, pois ele ainda é beta.

O pior que estou caçando o bug para fazer um pull request lá para tentar resolver, mas é tão crypt o erro que sei lá onde esta.

Caramba! Pelo menos sei que não fiz nada de errado, e minha suspeita em ser incompatibilidade entre as versões se concretizou. Acompanharei os próximos releases pra verificar se algo muda.

Vou agora iniciar os estudos de API, e quem sabe avançar no Javascript em si. Pretendo fazer uma arquitetura com API e o Vue para projetos futuros.

Só senti falta do VueX, que muitos falam. Preciso agora também descobrir formas de entrar por uma rota e exibir o resultado em outra, pra fazer itens mais complexos, como login, redirect pós login para home, menus dinâmicos, etc...

Muito obrigado pelo apoio! Achei sensacional o curso, a didática e formato do curso! Obrigado por enquanto! :)

E aí, beleza?

Estava com o mesmo problema que você, e consegui resolver da seguinte maneira

import VeeValidate, { Validator } from 'vee-validate';
import msg from './pt_BR';
...
Validator.addLocale(msg);
Vue.use(VeeValidate, {
    locale: 'pt_BR'
});

Estava com o mesmo problema, resolvi com a solução do Anderson. VALEU!

Excelente Anderson! Resolveu pra mim também! Obrigado.

Obrigado Anderson!!! Fiquei um tempão tentando resolver e nada. Aqui sua solução funcionou certinho também. vlws!

Excelente Anderson! Resolveu pra mim também! Obrigado.

Boa, Anderson! Resolveu aqui também. Valeu! :)