如何在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 - >付款狀態

所以，如果反式數據使用，這是行不通的

我怎樣才能解決這個問題？

來源

2017-09-28 Success Man

你可以在這種情況下使用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.

來源

2017-09-28 08:42:18 webmasterdro

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

來源

2017-09-28 12:44:13 LakiGeri

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

回答

相關問題