如何在 vuejs 或任何其他解决方案上解决这个数组问题？答案

【问题标题】：How can I solve this array problem on vuejs or any other solution?如何在 vuejs 或任何其他解决方案上解决这个数组问题？
【发布时间】：2020-02-08 06:05:51
【问题描述】：

我正在尝试在 multilanguage 的 vuejs 中创建一个 Web，到目前为止，我唯一想到的是将翻译插入到数组中，然后将在 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 元素及其各自的值和名称。 So I need that when the value of the select is English, the content of the page is in English and so on with all languages. 如您所见，我有一个名为 navItems 的数组，它分别将导航列表的每个元素存储在一个对象中。我尝试使用 changeLang 方法将它们全部保存在一个名为 selectedLang 的新数组中，然后如上所述使用 JSX 调用.知道怎么做吗？

【问题讨论】：

标签： javascript html arrays vuejs2 vue-component

【解决方案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:[] 之后添加 languageSelected = 'es' //这样英语将成为默认选择的语言
在选择中添加 languageSelected 作为 v-model。 <select v-model="languageSelected" name="language-selector" id="language-selector">
更改 lang 对象的值与 navItems 的 id 相同

【讨论】：