如何在 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?的主要内容,如果未能解决你的问题,请参考以下文章

从 vue.js 过滤器返回 vue 实例(Vue.js 2)

如何在 vue js 2 上动态添加“活动”类?

如何在 vue.js 中删除类

如何使用 Vue.js 类设置计时器

如何在 Vue.js 中获取事件信息?

Vue.js 插槽 - 如何在计算属性中检索插槽内容