Vue-i18n 不翻译内部组件脚本标签

Question

构建一个语言切换器，一切正常，但是当我在数据对象中使用 $t() 时，当我在语言之间切换时它不会是动态的。

Component.vue

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

<script>

const mainMenu = [
{
    label: $t('dashboard'),
},
{
    label: $t('users'),
},
{
    label: $t('settings'),
},
}
export default {
    data () {
        return {
           menu = MainMenu
        }
    }
}
</script>

i18n.js

// https://vue-i18n.intlify.dev/

import { createI18n } from 'vue-i18n'

export function loadLocalMessages () {
    const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
    const messages = {}
    locales.keys().forEach(key => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i)
        if (matched && matched.length > 1) {
            const locale = matched[1]
            messages[locale] = locales(key)
        }
    })
    return messages;
}

const i18n = createI18n({
    locale: 'en',// .env not working
    fallbackLocale: 'en',// .env not working
    messages: loadLocalMessages(),
});
  
export default i18n

Answer 1

data 在创建组件时只被调用一次，并且它不是响应式的。

要使$t() 上的属性反应，它应该是computed：

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

demo

Answer 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>