如何在 vuejs 或任何其他解决方案上解决此数组问题?

Question

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

.HTML：

<template>
<div id="app">
<header>
<nav>
<div class="superior-nav">
<div class="langs">
<select name="language-selector" id="language-selector">
<option v-for="lang in langs" :value="lang.value">{{lang.name}}</option>
</select>
</div>
<div class="contacts">
<ul>
<li><a href=""></a><i class="fab fa-facebook-f"></i></li>
<li><a href=""></a><i class="fab fa-twitter"></i></li>
<li><a href=""></a><i class="fab fa-instagram"></i></li>
<li><a href=""></a><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>
<div class="inferior-nav">
<nav class="nav">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Team</a></li>
<li><a href="">Careers</a></li>
</ul>
</nav>
</div>
</nav>
</header>
</div>
</template>

脚本：

<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>

如您所见，我有一个 Select 元素，其中包含它们各自的值和名称。所以我需要当选择的值是英语时，页面的内容是英语的，依此类推，所有语言。 如您所见，我有一个名为navItems的数组，它分别将导航列表的每个元素存储在对象中。 我尝试使用changeLang方法做的是将它们全部保存在一个名为selectedLang的新数组中，然后如上所述使用JSX调用。知道怎么做吗？

Answer 1

在选择标签中添加 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：[] 之后添加语言选定 = 'es'//以便英语将成为将选择的默认语言
• 添加语言在选择中选择为 v 模型。<select v-model="languageSelected" name="language-selector" id="language-selector">
• 更改 lang 对象的值与导航项的 id 相同