Я работаю над проектом Vue, поддерживающим два языка с использованием VUEX и Vuetify.
Вместо того, чтобы напрямую ссылаться на текст следующим образом: {{ $vuetify.t('$vuetify.my-component.text') }}
, я помещаю его как состояние в модуль хранилища VUEX с пространством имен, затем ссылаюсь на него как на вычисляемое свойство mapstate, например: {{ textProp }}
и в вычисляемом скрипте я помещаю ...mapState('language', ['textProp'])
какой язык является модулем VUEX:
export default {
namespaced,
state() {
return {
textProp: Vue.prototype.$vuetify.t('$vuetify.textProp')
}
}
}
Теперь перейдем к моей проблеме:
Мне нужно пройтись по списку элементов, каждый элемент содержит динамический текст, который изменяется в соответствии с выбранным языком, так что это шаблон HTML:
<v-list>
<v-list-tile
v-for="item in items"
:key="item.title"
:to="item.to"
router>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ item.title }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
и сценарий:
export default {
data() {
return {
items: [
{ title: this.home, to: '/', icon: 'home' },
{ title: this.orgsTxt, to: '/orgs', icon: 'business' },
{ title: this.peopleTxt, to: '/people', icon: 'people' },
{ title: this.servicesTxt, to: '/services', icon: 'store' }
],
}
},
computed: {
...mapState('language', [
'home',
'orgsTxt',
'peopleTxt',
'servicesTxt',
]),
},
}
Моя проблема связана со ссылкой на текст в заголовке, и я не могу указать это created()
, потому что текст не изменится, когда пользователь изменит язык, и я не хочу жестко кодировать каждый элемент списка.
извините за слишком много объяснений и заранее спасибо.