VueJS Перевести Плагин - PullRequest
Новая
       5

VueJS Перевести Плагин

0 голосов
/ 05 июня 2018

Я использую плагин VueTranslated, созданный javisperez, и у меня возникают трудности с получением переведенного текста.

Я использую глобально.У меня есть файл со всеми словами и их переводами, такими как: 

import Vue from 'vue'
import VueTranslate from 'vue-translate-plugin'
Vue.use(VueTranslate)

Vue.locales({
  'pt_BR': {
    'hello-world': 'Olá mundo'
  },
  'en_US': {
    'hello-world': 'Hello world'
  }
})

export default ()

Так что, когда я нахожусь в любом компоненте, я могу получить слова, используя что-тонапример: 

<template>
<div>
    <p> {{t('hello-world)}} </p>
</div>
</template>

Затем тег p показывает мне строку Hello world или Olá mundo в зависимости от моего языкового набора.Но если в этом компоненте есть что-то вроде 

<template>
<div>
    <p> {{message}}
</div>
</template>

<script>
    export default {
        data: () => ({
            message: this.$translate.text('hello-world)
        })
    }
</script>

, то оно просто появляется hello-world в моем теге p.Как получить переведенную строку, если она получена из тега script моего компонента?Или у меня есть что-то еще, чтобы попробовать вместо этого плагина?Спасибо

Ответы [ 3 ]

0 голосов
/ 11 июня 2018

Мне нужно было использовать только this.t('message'), например: 

<script>

export default {
    data {
        return {
            message: this.t('message')
        }
    }
}

</script>
0 голосов
/ 21 августа 2018

Это должно быть исправлено следующим образом: '$', 

export default {
data {
    return {
        message: this.$t('message')
    }
}

}

0 голосов
/ 05 июня 2018

Не используйте функцию стрелки для возврата ваших данных и используйте свойство locale вместо text: 

new Vue({
  el: "#app",
  data() {
    return {
      message: this.$translate.locale['hello-world']
    }
  },
  beforeCreate() {
    this.$translate.setLang('pt_BR')
  },
  locales: {
    pt_BR: {
      'hello-world': 'Olá mundo'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-translate-plugin@1.2.0/dist/vue-translate.common.min.js"></script>
<div id="app">
  <p> {{ message }} </p>
</div>
...