Search code examples
vue.jstranslation

How to pass translated text to data in vue js

I am currently using vuei8n for translation. Gotta admit I find the docs a bit difficult to understand.

I currently have this component called Forex.vue

    <i18n>
    {
      "en": {
        "title": "What is Forex ? ",
       
      },
      "zh": {
        "title": "什么是外汇？"
      }
    }
    </i18n>

<template>
  <div> {{$t('title')}}</div> //this works
</template>

But What I want to do is this

<template>
  <div> {{title}}</div>
</template>

<script>
export default {
  name: "Forex",
  data() {
      return {
          title: $t('title')  =============> How to pass the translated text inside title
      }

  }
}
</script>
Solution

  • Try to use a computed property that return the translated title :

    <template>
  <div> {{title}}</div>
</template>

<script>
export default {
  name: "Forex",
 computed:{
   title(){
      return this.$t('title')
  }
}
}
</script>