javascript - 我怎样才能在 vuejs 或任何其他解决方案上解决这个数组问题？

Question

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

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 元素及其各自的值和名称。所以我需要当 select 的值是英文时，页面的内容是英文等所有语言。如您所见，我有一个名为 navItems 的数组，它分别在一个对象中存储导航列表的每个元素。我尝试用 changeLang 方法做的是将它们全部保存在一个名为 selectedLang 的新数组中，然后如上所述用 JSX 调用.知道怎么做吗？

Answer 1

将 v-model 添加到您的 select 标签中，无论选择什么数据，它都会自动保存到 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':[]//这样英语将成为将要选择的默认语言
• 在选择中添加 languageSelected 作为 v-model。 <select v-model="languageSelected" name="language-selector" id="language-selector">
• 将 lang 对象的值更改为与 navItems 的 id 相同