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"
}
}