Прокрутите вычисленные свойства mapstate в Vuejs

Я работаю над проектом 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(), потому что текст не изменится, когда пользователь изменит язык, и я не хочу жестко кодировать каждый элемент списка.

извините за слишком много объяснений и заранее спасибо.


person abdu saad    schedule 13.07.2019    source источник


Ответы (1)


Я исправляю это, добавляя метод вместо ссылки на заголовок из массива:

HTML-шаблон:

  <v-list>
    <v-list-tile
            v-for="(item, index) in items"
            :key="index"
            :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>

            {{ navItem(index) }}

        </v-list-tile-title>
      </v-list-tile-content>

    </v-list-tile>
  </v-list>

сценарий:

methods: {
    navItem(id){
        if(id === 0) return this.home;
        if(id === 1) return this.orgsTxt;
        if(id === 2) return this.peopleTxt;
        if(id === 3) return this.servicesTxt;
    }
},

теперь все работает нормально.

person abdu saad    schedule 13.07.2019