Comment puis-je utiliser lang class laravel dans vue.js 2?

Question

Mon composant vue comme ceci:

<template> 
    <ul class="nav nav-tabs nav-tabs-bg"> 
     <li role="presentation" v-for="item in tabs"> 
      1. failed -> {{ item.name }} 2.success -> {{trans('purchase.payment.tab')}} 
     </li> 
    </ul> 
</template> 
<script> 
    export default { 
     data() { 
      return { 
       tabs: [ 
        {name: "trans('purchase.payment.tab')"} 
       ] 
      } 
     } 
    } 
</script> 

Mon lang en Laravel (ressources/lang/fr/purchase.php) comme ceci:

<?php 
return [ 
    'payment' => [ 
     'tab' => 'Payment Status', 
    ], 
    ... 
]; 

Si la vue des composants exécuté, le résultat comme celui-ci :

1. a échoué -> trans ('purchase.payment.tab') 2.success -> Statut du paiement

Ainsi, si trans utilisé dans les données, il ne fonctionne pas

Comment puis-je résoudre ce problème?

Answer 1

Il n'est pas possible d'utiliser une aide PHP dans JavaScript. Mais, vous pouvez créer un objet de traduction.

Dans votre AppServiceProvider (vous pouvez en créer un nouveau si vous voulez):

// Don't forget to import the facade 
use Illuminate\Support\Facades\Lang; 


public function boot() { 
    $translations = [ 
    'auth' => Lang::get('auth'), 
    'pagination' => Lang::get('pagination'), 
    'passwords' => Lang::get('passwords'), 
    'validation' => Lang::get('validation'), 
    ]; 

    view()->share('translations', json_encode($translations)); 

} 

Dans votre HTML (je suggère en-tête), vous pouvez simplement appeler:

window.app = { 
    translations: {!! $translations !!}, 
} 

Et pour accéder à l'aide à JS, vous pouvez simplement ce faire, par exemple:

this.app.translations.auth.throttle // Too many login attempts. Please try again in :seconds seconds. 

Answer 2

J'utilise vue-i18n pour cela. De cette façon, vous devriez faire son propre dictionnaire. J'ai fait un fichier i18n/en.js;

module.exports = { 
    login: { 
     title: 'Login', 
     loginButton: 'Login', 
     emailInput: 'email', 
     passwordInput: 'password', 
    }, 
    Form: { 
     title: 'Form', 
    } 
} 

et un i18n/hu.js avec les mêmes variables en hongrois. Ensuite, je fait un fichier i18n/map.js:

var en = require('./en.js'); 
var hu = require('./hu.js'); 

module.exports = { 
    en, 
    hu, 
} 

et enfin, mis en vue.js, vérifiez ma partie de fichier app.js:

require('./bootstrap'); // vue comes from here 
import VueI18n from 'vue-i18n' 
import dictionary from './i18n/map' 

var localeTmp = document.documentElement.lang; 
var locale = "hu"; 
if(localeTmp) { 
    locale = localeTmp 
} 

const i18n = new VueI18n({ 
    locale: locale, // set locale 
    dictionary, // set map of dictionary 
}) 
.... 
const app = new Vue({ 
    el: 'app', 
    i18n, 
}); 

Sa façon très élégante.

et comment je l'utilise dans le composant? simple:

.... 
    <md-input-container> 
    <md-icon>person</md-icon> 
    <label>{{ $t("loginForm.emailInput") }}</label> 
    <md-input email name="email" required v-model="email" /> 
    </md-input-container> 
    ....