如何在vue.js 2中使用lang类laravel? [英] How can I use lang class laravel in vue.js 2?

问题描述

我的Vue组件是这样的:

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>

我在laravel(resources/lang/en/purchase.php)中的lang就像这样:

My lang in laravel(resources/lang/en/purchase.php) like this :

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

如果执行了组件vue，则结果如下:

If the component vue executed, the result like this :

1. 失败-> trans('purchase.payment.tab')2.成功->付款状态

因此，如果在数据中使用反式，它将不起作用

So, if trans used in data, it does not work

我该如何解决这个问题?

How can I solve this problem?

推荐答案

我使用 vue-i18n .这样，您应该制作自己的字典. 我做了一个i18n/en.js文件；

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',
    }
}

和i18n/hu.js在匈牙利语中具有相同的变量.然后我制作了一个i18n/map.js文件:

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

最后，将其设置在vue.js中，检查我的app.js文件部分:

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