Get translations inside the components method #52
Comments
|
Hi @kikky7, You should be able to simply use |
|
@tikiatua I get this.$t is not a function, which makes sense, I guess, but I'm not sure how to correct it. export default {
metaInfo: {
title: this.$t('login')
}
}I also tried sticking it in |
|
Hi @daveo1001, It is a little tricky to follow your code logic, given only the snippets above. However, As a first step: try to use mounted() instead of created(). https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram If this does not work, I would recommend to use the functions provided on the vue instance i.e. Vue.i18n.translate(..). see #50 for an example on how to use it with vue router. |
|
nope and nope :/ But I figured it out. The package i'm using for setting title in header had an example. Thanks for the quick response! |
|
So basically you need to use a computed property? |
|
I don't really get the wizardy portion of vue but turning the metaInfo from an object into a function got things cooking. Oh, and I had to move export default {
data: () => ({
title: '' // can't put this.$t() here
}),
metaInfo () {
return {
title: this.title
}
},
created () {
this.title = this.$t('login')
}
}Thanks again for hanging out with me as I got through this! |
|
hi i need help with my code try with @daveo1001 solution but don't work. i tried with key.map and v-for inside v-for and it doesn't work i can't work with keys |
|
Hi @daplan128 Thank you for your request. From what I understand, you try to iterature over this.helpTitles to construct a translated object to push onto the this.helpInfo array. However this.helpTitles is set as a string further above. Maybe there is something I do not understand correctly. methods: {
createHelp() {
this.info = [this.Info1, this.Info2, this.Info3, this.Info4, this.Info5, this.Info6, this.Info7, this.Info8]
this.question = [this.Question1, this.Question2, this.Question3, this.Question4, this.Question5, this.Question6, this.Question7, this.Question8]
// this.helpTitles is specified as string value in the data section
for (let i = 0; i < this.helpTitles.length; i++) {
this.helpInfo.push({
'id': i,
// where dou you get the helpTitles, info and question arrays from.
// this should probably be this.helpTitles, this.info and this.question
'title': this.$t(helpTitles[i]),
'answear': this.$t(info[i]),
'question': this.$t(question[i])
})
}
}
},
mounted() {
this.createHelp()
} |
|
@tikiatua This is my original code, it shows the support information of my website, each title has a series of questions and answers saved within a .json file with all the information to be translated, the app opens correctly with it with the browser language but when I change the language with a switch, data is not rendered, add metaInfo as explained in the comments and try to add $ t in metainfo and in the method but I get an error, I don't understand where I should add $ t so that the title is translated with your questions and answers (these are organized through the helpItem component) If you can help me I would appreciate it my json files are shown like this: titulo1 tiene helpStarted (quiestion) and helpStartedInfo (answer) helpItem.vue |
|
Hmm.. Ok. I think, I know the reason for the problem. The $t function returns an object that is not reactive. This means, that changing the locale on the store will not change values already returned by this.$t(...). So the information that is returned in your data() function will not be automatically updated, if the locale on the store changes. Likewise, the information stored in the this.helpInfo will also not be updated, when you change the locale. I presume, that it should work, if you return the translations as computed properties instead of putting them on the data object – could you try this out. If this works, the next step would be to get the integration with the metaInfo() method working. <script>
import HelpItem from './HelpItem'
export default {
name: 'ModelHelp',
components: {
HelpItem
},
computed: {
// generate translations as computed property to update information
translations() {
return {
question: this.$t('general.help.helpStarted'),
info1: this.$t('general.help.helpStartedInfo'),
...
}
},
// generate help information as computed property
createHelp() {
let info = [this.translations.info1, this.translations.info2, ...]
let questions = [this.translations.question1, this.translations.question2, ...]
let helpInfo = [];
for (let i = 0; i < this.helpTitles.length; i++) {
helpInfo.push({
'id': i,
'title': this.helpTitles[i],
'answear': this.info[i],
'question': this.question[i]
})
}
return helpInfo;
}
}
}
</script>
|
|
@daplan128: I created a small example that works as intended. You can save it as html file and open it directly in the browser. The example is not yet done with the metaInfo plugin. P.S. What exactly is your intention with putting the information in metaInfo? <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuex-i18n</title>
<script src='https://cdn.polyfill.io/v2/polyfill.min.js?flags=gated&unknown=polyfill'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex-i18n.umd.js"></script>
</head>
<body>
<div id="app">
<div>Current locale: {{ $i18n.locale()}}</div>
<div @click="$i18n.set('en')" style="cursor:pointer">Set English</div>
<div @click="$i18n.set('de')" style="cursor:pointer">Set German</div>
<my-test-component />
</div>
<!-- application code -->
<script type="text/javascript">
// enable the vue devtools
Vue.config.devtools = true;
// initialize a new vuex store including our i18nVuexModule
const store = new Vuex.Store({});
// initialize the vuexi18nPlugin
Vue.use(vuexI18n.plugin, store);
// define default translations for english text
const localeEn = {
'message.title': 'My translated title',
'help.titles': [ 'title1 (English)', 'title2 (English)', 'title3 (English)']
};
// define default translations for english text
const localeDe = {
'message.title': 'Mein übersetzter Titel',
'help.titles': [ 'titel1 (German)', 'titel2 (German)', 'titel3 (German)']
};
// add the english locale to the i18n store
Vue.i18n.add('en', localeEn);
Vue.i18n.add('de', localeDe);
// set the current language to english
Vue.i18n.set('en');
Vue.component('my-test-component', {
template: `<div class="example-text">
<h1>message.title: {{ $t("message.title") }}</h1>
<div v-for="(help, index) in helpInfo" :key="index">
<div :id="help.id" class="help-subtitle">- {{ help.title }}</div>
</div>
</div>`,
computed: {
helpInfo() {
let info = [];
let helpTitles = this.$t('help.titles');
for (i = 0; i < helpTitles.length; i++) {
info.push({
index: i,
title: helpTitles[i]
})
}
return info;
}
}
});
var app = new Vue({
store: store,
el: '#app'
});
</script>
</body>
</html> |
I am trying to use translations object inside the methods. I lost more than 1 hour with this and finally came with this solution, but it is really intuitive to me. Is there any shorter way, because I can't find it in documentation.
The text was updated successfully, but these errors were encountered: