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

Posted 2023-02-22

【中文标题】循环遍历 Vuejs 中的 mapstate 计算属性

【英文标题】：Loop through mapstate computed properties in Vuejs

【发布时间】：2019-11-22 20:28:24

【问题描述】：

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

我没有像这样直接引用文本： $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() 因为当用户更改语言时文本不会改变，而且我不会对每个列表项进行硬编码。

抱歉解释太多，提前谢谢。

【参考方案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;
    
,

现在一切正常。