循环遍历 Vuejs 中的 mapstate 计算属性

Question

我正在使用 VUEX 和 Vuetify 开发支持两种语言的 Vue 项目。

而不是像这样直接引用文本：
{{ $vuetify.t('$vuetify.my-component.text') }}，我把它作为一个状态放在一个命名空间 VUEX 存储模块中，然后将它作为一个映射状态计算属性引用它，如下所示：{{ 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()因为当用户改变语言时文字不会改变，我不会硬编码每个列表项。

抱歉解释太多，在此先感谢。

Answer 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;
    }
},

现在一切正常。

循环遍历 Vuejs 中的 mapstate 计算属性

Loop through mapstate computed properties in Vuejs

internationalization

vue.js

computed-properties

vuex

vuetify.js