在Vuejs中遍历mapstate计算的属性
在Vuejs中遍历mapstate计算的属性
提问于 2019-07-13 09:00:58
我正在从事Vue项目，使用VUEX和Vuetify支持两种语言。
而不是像这样直接引用文本：
{{ $vuetify.t('$vuetify.my-component.text') }}，我将其作为状态放在命名空间的VUEX存储模块中，然后将其引用为mapstate计算属性，如下所示：{{ textProp }}
在计算的脚本中，我将...mapState('language', ['textProp'])放在VUEX模块中，它是一个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
Stack Overflow用户
回答已采纳
发布于 2019-07-13 10:18:04
我通过添加一个方法来修复它，而不是引用数组中的标题：
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;
}
},现在一切都很顺利。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57017666
复制相关文章
相似问题
腾讯云开发者
