我有一个主视图上的许多按钮。我想翻译标签时，我选择的语言。
<div class="col-2">
<localeSwitcher/>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 q-pa-xs" v-for="btn in moduleButtons" :key="btn.title"
<div class="col-12">
<span>{{ btn.title }}</span>
</div>
</div>import localeSwitcher from '../components/language/localeSwitcher.vue'
components: {localeSwitcher},
data() {
return {
moduleButtons: [
{
title: this.$t(menu.modules.production)
},
{
title: this.$t(menu.modules.employees)
},
{
title: this.$t(menu.modules.machine)
}
]
}
}'src/boot/i18n.js'
import VueI18n from 'vue-i18n'
import messages from 'src/i18n'
export default ({ app, Vue }) => {
app.i18n = new VueI18n({
locale: 'en-us',
fallbackLocale: 'de',
messages
})
}我的localeSwitcher.vue：
<template lang="pug">
.row-2
.col.locale-switcher
q-icon(name="fas fa-globe").q-mr-sm
q-select(v-model="lang" :options="langOptions" emit-value map-options options-dense dense borderless).selectStyle
</template>
<script>
export default {
name: 'localeSwitcher',
data() {
return {
lang: this.$i18n.locale,
langOptions: [
{value: 'de', label: 'Deutch'},
{value: 'en-us', label: 'English'}
]
}
},
methods: {
},
watch: {
lang(lang) {
console.log('%c watch: ', 'color: black; background-color: green', lang)
this.$i18n.locale = lang
}
}
}
</script>当我在HTML中使用$t（'menu.modules. production'）时，q-select工作，但每个按钮都有相同的标签，这是错误的。当我使用{{btn.title}}时不起作用。我如何从data（）中使用moduleButtons来显示标题？或者我应该怎么做？
............................
1条答案
按热度按时间jq6vz3qz1#
看起来问题出在第一个代码块中的v-for循环。具体来说，包含标记的没有正确关闭。
下面是正确的代码：
v-for循环现在应该可以正常工作了，{{ btn.title }}表达式应该为moduleButtons数组中的每个按钮显示相应的标题。
如果仍然不工作。
在这种情况下，可能是在data函数中如何定义moduleButtons数组的问题。问题可能是在挂载组件之前调用了this.$t，因此转换还不可用。
要解决此问题，您可以尝试将moduleButtons数组移动到计算属性中，如下所示：
这样，只有在组件被安装并且转换可用之后，才计算moduleButtons数组。
此外，确保菜单对象已定义，并且包含每个模块的正确翻译。