Javascript 如何在vuejs或任何其他解决方案上解决此阵列问题？

我试图在vuejs中创建一个多语言的web，到目前为止，我唯一想到的是在数组中插入翻译，然后使用JSX在html文档中引用这些翻译。如果有人有一个更有利可图的想法，并帮助我实现它，我将不胜感激

HTML:

{{lang.name}

脚本：

<script>
export default {
  name: 'app',
  data() {
    return {
      langs: [
        {
          id: 1,
          name: "English",
          value: "English"
        },
        {
          id: 2,
          name: "Español",
          value: "Spanish",
        },
        {
          id: 3,
          name: "Français",
          value: "French"
        }
      ],
      navItems: [
        {
          id: "en",
          home: "Home",
          about: "About",
          services: "Services",
          team: "Team",
          careers: "Careers"
        },
        {
          id: "es",
          home: "Inicio",
          about: "Sobre Nosotros",
          services: "Servicios",
          team: "Equipo",
          careers: "Trabajos"
        },
        {
           id: "fr",
          home: "Accueil",
          about: "À propos",
          services: "Service",
          team: "Équipe",
          careers: "Carrières"
        }
      ],
      selectedLang: []
    }   
  },
  components: {

  },
  methods: {

    changeLang(){
      var id = this.selectedLang;
      var option = document.getElementById("language-selector")[0].value;
      if(option.value === "English"){
        this.selectedLang[0] == navItems[0]
      }
    }
  }
}
</script>

导出默认值{
名称：“应用程序”，
数据（）{
返回{
兰格：[
{
id:1，
名称：“英语”，
价值观：“英语”
},
{
id:2，
名称：“Español”，
值：“西班牙语”，
},
{
id:3，
名称：“法国”，
价值：“法语”
}
],
navItems：[
{
id:“嗯”，
家：“家”，
关于：“关于”，
服务：“服务”，
团队：“团队”，
职业：“职业”
},
{
id:“es”，
主页：“Inicio”，
关于：“Sobre Nosotros”，
服务：“服务”，
团队：“装备”，
职业：“特拉巴霍斯”
},
{
id:“fr”，
主页：“Accueil”，
关于：“提议”，
服务：“服务”，
小组：“埃奎佩”，
职业：“卡里雷”
}
],
selectedLang:[]
}   
},
组成部分：{
},
方法：{
changeLang（）{
var id=this.selectedLang；
var option=document.getElementById（“语言选择器”）[0]。值；
如果（option.value==“英语”）{
this.selectedLang[0]==navItems[0]
}
}
}
}

正如您所看到的，我有一个Select元素，它有各自的值和名称。所以我需要当select的值是英语时，页面的内容是英语，等等，所有语言。 如您所见，我有一个名为navItems的数组，分别将导航列表中的每个元素存储在一个对象中。

---

我尝试使用changeLang方法将它们全部保存在一个名为selectedLang的新数组中，然后如上所述使用JSX调用它们。你知道怎么做吗？

在你的选择标签中添加v-model，无论选择什么数据，它都会自动保存到v-model。删除此代码

var option = document.getElementById("language-selector")[0].value; if(option.value === "English"){
        this.selectedLang[0] == navItems[0]
      }

把它改成这个

this.selectedLang = []
navItems.forEach(lang=>{
    if(lang.id == this.languageSelected){
     this.selectedLang.push(lang) 
     }
})

• 在selectedLang:[]//之后添加languageSelected='es'，以便将选择英语作为默认语言
• 在选择中添加选定语言作为v-model<代码>
• 将lang对象的值更改为与navItems的id相同

this.selectedLang = []
navItems.forEach(lang=>{
    if(lang.id == this.languageSelected){
     this.selectedLang.push(lang) 
     }
})