[Vuejs]-Vue-i18n not translating inside component script tags

by

2👍

✅

<template>
  <div v-for="item in menu">
     {{ item.label }}
   </div>
</template>

<script>

export default {
  computed: {
    menu() {
      return [{
         label: this.$t('dashboard'),
       }, {
         label: this.$t('users'),
       }, {
         label: this.$t('settings'),
       }]
    }
  }
}
</script>
👤Michal Levý

2👍

data is only ever called once when creating the component, and it’s not intended to be reactive.

To make a property reactive on $t(), it should be computed:

export default {
  computed: {
    hello() {
      return this.$t('hello')
    }
  }
}

demo

👤tony19

Leave a comment