访问具有用户区域设置的 json 表中的良好区域设置

Question

我有一个JSON表：

[
{
"fr": { "name": "chien", "name_plurial": "chiens" },
"en": { "name": "dog", "name_plurial": "dogs" }
},
{
"fr": { "name": "chat", "name_plurial": "chats" },
"en": { "name": "cat", "name_plurial": "cats" }
},
]

我有一个 .vue 文件，或者我导入了这个文件，我在哪里做了一个 v-for 来恢复数据

<template>
<div>
v-for="(specie, index) in species"
:key="index"
:label="specie.en.name | capitalize"
:value="specie.en.name">
</div>
</template>
import Species from '~/static/data/species.json'
export default {
data() {
return {
species: Species,
}
},
}

我想根据我的用户user.lang的语言检索区域设置。

怎么做？

谢谢！

Answer 1

只需添加specie[${local}]即可显示所需的本地语言。

喜欢这个？(示例en(

new Vue({
el: "#app",
data: {
local: "en",
species: [
{
fr: { name: "chien", name_plurial: "chiens" },
en: { name: "dog", name_plurial: "dogs" }
},
{
fr: { name: "chat", name_plurial: "chats" },
en: { name: "cat", name_plurial: "cats" }
}
]
},
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span><b>{{local}}</b> language</span>
<ul>
<li v-for="(specie, index) in species" :key="index">{{specie[`${local}`].name}}</li>
</ul>
</div>

Answer 2

不确定，但也许您可以在return语句中使用filter()。

不知何故，以下内容：

const user = {
lang: 'en'
};
const species = [
{
"fr": { "name": "chien", "name_plurial": "chiens" },
"en": { "name": "dog", "name_plurial": "dogs" }
},
{
"fr": { "name": "chat", "name_plurial": "chats" },
"en": { "name": "cat", "name_plurial": "cats" }
},
];
const result = species.map(e => {
let elem = {};
elem[user.lang] = e[user.lang]
return elem;
});
console.log(result);

我希望这有所帮助！