时间戳

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

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

问题描述

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

标签： javascripthtmlarraysvuejs2vue-component

解决方案

在您的选择标签内添加 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' //这样英语将成为将被选择的默认语言
  • 在 select 中添加 languageSelected 作为 v-model。<select v-model="languageSelected" name="language-selector" id="language-selector">
  • 更改 lang 对象的值与 navItems 的 id 相同

推荐阅读