在从数组 Vue 中选择一个项目之前尝试翻译字符串。js/Nuxt

Question

所以，感谢你愿意帮助我，我在 laravel 的几个月开始学习 nuxt，我需要做一个特定类型的翻译，很难找到关于

我正在尝试将一些对象放入数组中，每个对象都有 3 个属性：相同字符串的 3 种不同语言。我有一个 return 正确对象字符串的函数，但我不熟悉如何为我的函数获取本地。我正在做一些学习，我真的无法在互联网上找到太多信息。我已经知道并且可以使用语言环境文件进行翻译，但我想制作此结构以便将来从 API.

中获取信息

直到现在发生的事情是，一切运行好的，我的计算函数 return 从数组到我的屏幕的一个随机项目，但我试图在之前获取本地和翻译函数的结果math.random.

我的代码：

LoadingBar.vue

<template lang="html">
  <div class="loading-page" v-if="loading">
    <h1 class="title">Estamos preparando o terreno para você</h1>
    <img src="~/assets/media/photos/agronomy.png" />
    <p class="text">{{tiprandom}}</p>
  </div>

</template>

<script>
import randomtip from '~/components/randomtip.vue'
export default {

layout: 'blank',

components: {
  randomtip
},

      data: () => ({
           loading: true,
           tipolocal_id: 1,
           dicas: [
             {id:1, nome: 'Dica 1: Considere uma atenção maior às mudas, pois são bem sensíveis. É importante deixar o vaso em um local sombreado e de olho sempre na irrigação',
                    nome_en: 'Dica 1: Consider paying more attention to the seedlings, as they are very sensitive. It is important to leave the pot in a shaded place and always keep an eye on irrigation',
                    nome_es: 'Dica 1: Considere prestar más atención a las plántulas, ya que son muy sensibles. Es importante dejar la maceta en un lugar sombreado y vigilar siempre el riego.'
                    },
             {id:2, nome: 'Dica 2: Considere uma atenção maior às mudas, pois são bem sensíveis. É importante deixar o vaso em um local sombreado e de olho sempre na irrigação',
                    nome_en: 'Dica 2: Consider paying more attention to the seedlings, as they are very sensitive. It is important to leave the pot in a shaded place and always keep an eye on irrigation',
                    nome_es: 'Dica 2: Considere prestar más atención a las plántulas, ya que son muy sensibles. Es importante dejar la maceta en un lugar sombreado y vigilar siempre el riego.'
                    },
             {id:3, nome: 'Dica 3: Considere uma atenção maior às mudas, pois são bem sensíveis. É importante deixar o vaso em um local sombreado e de olho sempre na irrigação',
                    nome_en: 'Dica 3: Consider paying more attention to the seedlings, as they are very sensitive. It is important to leave the pot in a shaded place and always keep an eye on irrigation',
                    nome_es: 'Dica 3: Considere prestar más atención a las plántulas, ya que son muy sensibles. Es importante dejar la maceta en un lugar sombreado y vigilar siempre el riego.'
                    },
             ],
    }),
           computed: {
                  tiprandom () {
                    return this.dicas[Math.floor(Math.random()*this.dicas.length)]
                  },
                locale() {
                          if (this.$i18n.locale == 'pt-br') {
                            return 'pt_br'
                          } else {
                            return this.$i18n.locale
                          }
                        }
                      },

    methods: {

            functionDicas(dicas) {
                    if (this.$i18n.locale == 'pt-br') {
                      return dicas.nome
                    } else if (this.$i18n.locale == 'en') {
                      return dicas.nome_en
                    } else if (this.$i18n.locale == 'es') {
                      return dicas.nome_es
                    }
                  },

            
            start () {
               this.loading = true
                    },

            finish () {
              this.loading = false
                    },                    
                    }     
  }
</script>

Answer 1

你把这个复杂化了，并试图通过使用以下方法来做一些更容易的事情：nuxt-i18n

本质上，您创建一个包含翻译的 json 或 javascript 文件。这些翻译由 key 标记，然后该键就是您在组件中调用的内容。

阅读 link，它应该更有意义！

在从数组 Vue 中选择一个项目之前尝试翻译字符串。js/Nuxt

Trying to translate the string before choose a item from array Vue.js/Nuxt

javascript

vue.js

nuxt.js