如何在 vue.js 2 中使用 lang 类 laravel? [英] How can I use lang class laravel in vue.js 2?
问题描述
我的 vue 组件是这样的:
<ul class="nav nav-tabs nav-tabs-bg"><li role="presentation" v-for="标签中的项目">1. 失败 ->{{ item.name }} 2.success ->{{trans('purchase.payment.tab')}}<脚本>导出默认{数据() {返回 {标签: [{name: "trans('purchase.payment.tab')"}]}}}我在 laravel(resources/lang/en/purchase.php) 中的语言是这样的:
['标签' =>'支付状态'，],...];如果组件vue执行，结果如下:
<块引用>- 失败 -> trans('purchase.payment.tab') 2.success -> 付款状态
所以，如果在数据中使用trans，则不起作用
我该如何解决这个问题?
我使用 vue-i18n 为此.这样你就应该制作自己的字典.我做了一个 i18n/en.js 文件；
module.exports = {登录: {title: '登录',loginButton: '登录',电子邮件输入:'电子邮件'，密码输入:'密码'，},形式: {title: '表格',}} 和一个 i18n/hu.js 在匈牙利语中具有相同的变量.然后我做了一个 i18n/map.js 文件:
var en = require('./en.js');var hu = require('./hu.js');模块.出口 = {恩，胡，}最后，在vue.js中设置，检查我的app.js文件部分:
require('./bootstrap');//vue 来自这里从 'vue-i18n' 导入 VueI18n从'./i18n/map'导入字典var localeTmp = document.documentElement.lang;var locale = "hu";如果(localeTmp){语言环境 = localeTmp}const i18n = 新的 VueI18n({语言环境:语言环境，//设置语言环境字典,//设置字典映射})....const app = new Vue({el: '应用',i18n，});这是一种非常优雅的方式.
以及我如何在组件中使用?简单:
<代码> ....<md-输入-容器><md-icon>人物</md-icon><label>{{ $t("loginForm.emailInput") }}</label><md-input email name="email" required v-model="email"/></md-input-container>....My vue component like this :
<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>
My lang in laravel(resources/lang/en/purchase.php) like this :
<?php
return [
'payment' => [
'tab' => 'Payment Status',
],
...
];
If the component vue executed, the result like this :
- failed -> trans('purchase.payment.tab') 2.success -> Payment Status
So, if trans used in data, it does not work
How can I solve this problem?
I use vue-i18n for that. That way you should make its own dictionary.
I made a i18n/en.js file;
module.exports = {
login: {
title: 'Login',
loginButton: 'Login',
emailInput: 'email',
passwordInput: 'password',
},
Form: {
title: 'Form',
}
}
and a i18n/hu.js with the same variables in Hungarian. Then I made a i18n/map.js file:
var en = require('./en.js');
var hu = require('./hu.js');
module.exports = {
en,
hu,
}
and finally, set it in vue.js, check my app.js file part:
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,
});
Its a very elegant way.
and how I use in component? 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>
....
这篇关于如何在 vue.js 2 中使用 lang 类 laravel?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
