如何在vue.js 2中使用lang class laravel？

问题描述：

我VUE成分是这样的：如何在vue.js 2中使用lang class laravel？

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

我的郎laravel（资源/郎/ EN/purchase.php）是这样的：

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

如果组件VUE执行，结果是这样：

失败 - >反式（ 'purchase.payment.tab'）2.success - >付款状态

所以，如果反式数据使用，这是行不通的

我怎样才能解决这个问题？

你可以在这种情况下使用vue-i18n –

@Hanlin Wang，你是什么意思？试着更详细地解释 –

您能否为我们发布您的反馈，@SuccessMan？ =） – webmasterdro

答

不可能在JavaScript中使用PHP助手。但是，您可以创建翻译对象。

在你AppServiceProvider（你可以创建一个新的，如果你想）：

// 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)); 

}

在HTML（我建议头），你只需拨打：

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

而且使用访问在JS，你可以做到这一点，例如：

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

答

我用vue-i18n了点。这样你应该制作自己的字典。我做了一个i18n/en.js文件;

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

和i18n/hu.js在匈牙利具有相同的变量。然后，我做了一个i18n/map.js文件：

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

module.exports = { 
    en, 
    hu, 
}

终于，在vue.js设置，检查我的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, 
});

它是一种非常优雅的方式。

以及我如何在组件中使用？简单：

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

如何在vue.js 2中使用lang class laravel？

相关推荐