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

Tradução não ocorre

Olá, a tradução das mensagens não esta funcionando em meu projeto.

Revi todos os passos, inclusive também, copiei os fontes da explicação do exercício, porem não é feita a tradução.

Meu 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 name="titulo" v-model="foto.titulo" id="titulo" autocomplete="off"
                       v-validate data-vv-rules="required|min:3|max:30" data-vv-as="título">
                <span class="erro" v-show="errors.has('titulo')">{{ errors.first('titulo') }}</span>
            </div>

            <div class="controle">
                <label for="url">URL</label>
                <input name="url" v-model="foto.url" id="url" autocomplete="off"
                       v-validate data-vv-rules="required">
                <span class="erro" v-show="errors.has('url')">{{ errors.first('url') }}</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';
    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
            }
        },

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

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

        },

        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));
                    });

            }

        }
    }

</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>

Meu main.js

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

import VueResource from 'vue-resource';
import VueRouter from 'vue-router';
import { routes } from './routes';
import VeeValidate from 'vee-validate';
import msg from './pt_Br';

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

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

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

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

Meu package.json

{
  "name": "alurapic",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Fabricio Ferreira Santos",
  "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": {
    "vee-validate": "^2.0.0-beta.18",
    "vue": "^2.2.1",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.1.1"
  },
  "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",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}
4 respostas

Copiou o arquivo para qual pasta? Aparece mensagem console Chrome ? Fique tranquilo que vai funcionar...vamos descobrir

solução!

Bom...no seu código você deu duas vezes use no módulo. Reparou? Deixe apenas o segundo.

Era isso mesmo.... Depois dessa vou tomar uma cerveja...rs

Kkkkkkkkk