Combinaison de la syntaxe du composant de fichier unique Vue-i18n avec les messages root

Question

J'expérimente avec l'excellent plugin vue-i18n pour Vue. Il a un neat feature qui me permet d'intégrer des traductions directement dans le modèle qui en a besoin. Cependant, si je les utilise, je suis incapable d'accéder au nœud de traduction racine. Est-ce que ce modèle est supporté ou est-ce que je le fais juste mal?

main.js

import VueI18n from 'vue-i18n'; 
Vue.use(VueI18n); 
const i18n = new VueI18n({ 
    locale: 'en', 
    messages: { 
    en: { 
     'company-name': 'billy-bob\'s fine steaks.' 
    } 
    } 
}); 

Sample.vue

<i18n> 
    { 
    "en": { 
     "title": "@:company-name - yeee hawwww!!!" 
    } 
    } 
</i18n> 

<template> 
    <div id="app" class="container"> 
    <site-header :title="$t('title')"></site-header> 
    </div> 
</template> 

Answer 1

Il semble que les définitions i18n sont merged together de telle sorte que, dans le composant, vous auriez accès à la fois la les définitions de l'enfant et de l'enfant i18n, avec les définitions de l'enfant remplaçant les parents lorsqu'il y avait un chevauchement (par exemple, si vous aviez une clé title dans le parent et l'enfant, l'enfant serait utilisé). Cependant, la syntaxe que vous utilisez ne fonctionne clairement pas. Dans ce cas, je pense que je définirais un calcul qui combine les deux valeurs traduites et l'utilise.

computed:{ 
    title(){ 
     return this.$t("company-name") + this.$t("title") 
    } 
} 

Ensuite, utilisez simplement la valeur calculée dans votre modèle.

<template> 
    <div id="app" class="container"> 
    <site-header :title="title"></site-header> 
    </div> 
</template>