如何在 vue.js 2 中使用 lang 类 laravel?
Posted
技术标签:
【中文标题】如何在 vue.js 2 中使用 lang 类 laravel?【英文标题】:How can I use lang class laravel in vue.js 2? 【发布时间】:2018-03-09 21:29:46 【问题描述】:我的 vue 组件是这样的:
<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(resources/lang/en/purchase.php) 中的语言是这样的:
<?php
return [
'payment' => [
'tab' => 'Payment Status',
],
...
];
如果组件vue执行,结果如下:
失败 -> trans('purchase.payment.tab') 2.success -> 付款状态
所以,如果在数据中使用了trans,它就不起作用了
我该如何解决这个问题?
【问题讨论】:
这种情况下可以使用vue-i18n @Hanlin Wang,什么意思?尝试更详细的解释 @SuccessMan,您可以为我们发表您的反馈意见吗? =) 【参考方案1】:无法在 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.
【讨论】:
【参考方案2】:我为此使用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 类 laravel?的主要内容,如果未能解决你的问题,请参考以下文章