53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<h1>{{ content.title }}</h1>
|
|
<p>{{ content.body }}</p>
|
|
</div>
|
|
|
|
<p>Idioma actual: {{ $store.getters['langcode'] }}</p>
|
|
<p>Ruta actual: {{ $route.params.langcode }}</p>
|
|
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" @click="cambiarIdioma">
|
|
{{ $store.getters['langcode'] === 'es' ? 'Cambiar a Català' : 'Canviar a espanyol' }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from 'vuex';
|
|
export default {
|
|
data() {
|
|
return {
|
|
content: {},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['langcode']),
|
|
},
|
|
async created() {
|
|
const langcode = this.$route.params.langcode;
|
|
try {
|
|
const res = await import(`~/data/${langcode}/index.json`);
|
|
this.content = res.default;
|
|
} catch (err) {
|
|
console.error('Error al cargar contenido:', err);
|
|
this.content = {
|
|
title: 'Contenido no disponible',
|
|
body: 'No se pudo cargar el contenido.',
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['setLangcode']),
|
|
cambiarIdioma() {
|
|
const nuevoIdioma = this.langcode === 'es' ? 'cat' : 'es';
|
|
this.setLangcode(nuevoIdioma);
|
|
this.$router.push({ path: `/${nuevoIdioma}` });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |