Как я могу решить эту проблему с массивом на 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 с соответствующими значениями и именами. Поэтому мне нужно, чтобы при выборе значения «Английский» содержимое страницы было на английском и т. Д. Со всеми языками. Как вы можете видеть, у меня есть массив с именем navItems , в котором хранится каждый элемент списка навигации соответственно. То, что я пытаюсь сделать с помощью метода changeLang , это сохранить их все в новом массиве с именем selectedLang , а затем вызвать с JSX , как упомянуто выше. Есть идеи как это сделать?

Answer 1

Добавьте v-модель внутри вашего тега выбора, и любые выбранные данные будут автоматически сохранены в v-модель. Удалите этот код

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

• Добавьте languageSelected = 'es' после selectedLang: [] //, чтобы английский былязык по умолчанию, который будет выбран
• Добавить языкВыбран в качестве модели v в select. <select v-model="languageSelected" name="language-selector" id="language-selector">
• Изменить значение объекта lang так же, как идентификатор navItems