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

Posted

技术标签:

【中文标题】如何在 vuejs 或任何其他解决方案上解决这个数组问题?【英文标题】:How can I solve this array problem on vuejs or any other solution? 【发布时间】: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 调用.知道怎么做吗?

【问题讨论】:

【参考方案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。 &lt;select v-model="languageSelected" name="language-selector" id="language-selector"&gt; 更改 lang 对象的值与 navItems 的 id 相同

【讨论】:

以上是关于如何在 vuejs 或任何其他解决方案上解决这个数组问题?的主要内容,如果未能解决你的问题,请参考以下文章

Firefox 开发者工具中没有 VueJS 选项卡

使用 Node.js 或任何其他 Comet 解决方案进行流式传输

为啥这个数独求解器返回相同的板而不解决任何问题?

如何在 ijkplayer 中更改 HLS 质量以获得颤振或替代解决方案?

将 socket.io 数据传递给 vuejs

在 ubuntu 服务器上部署 vuejs 应用程序时如何解决剪贴板错误