Попытка перевести строку перед выбором элемента из массива Vue.js/Nuxt

#javascript #vue.js #nuxt.js

Вопрос:

итак, спасибо вам, кто попытается мне помочь, я возвращаюсь с нескольких месяцев в ларавеле, чтобы начать изучать nuxt, и мне нужно сделать определенный тип перевода, о котором трудно найти информацию

Я пытаюсь поместить некоторые объекты в массив, каждый объект имеет 3 свойства: 3 разных языка одной и той же строки. У меня есть функция, которая возвращает правильную строку объекта, но я не знаком с тем, как я могу получить локальную для своей функции. Это то, что я делаю для учебы, я действительно не могу найти много информации в Интернете. Я уже знаю и могу выполнить перевод с помощью файла локализации, но я хочу создать эту структуру, чтобы в будущем получать информацию из API.

До сих пор происходит следующее: все работает нормально, моя вычисляемая функция возвращает случайный элемент из массива на мой экран, но я пытаюсь получить локальную и результат функции translate до math.random.

Мой код:

Панель загрузки.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>
 

Ответ №1:

Вы слишком усложняете это и пытаетесь сделать что-то намного проще, используя следующее: nuxt-i18n

По сути, вы создаете json javascript файл или со своими переводами. Эти переводы помечены буквой а key , а затем этот ключ является тем, что вы называете в своих компонентах.

Прочитайте ссылку, и это должно иметь больше смысла!