Question

我们有一些VueJS组件，这些组件可以根据route参数为可从服务器获取的所有资源呈现内容。所有资源均由其自己的类表示（为此，我们使用vue-api-query）。

基本上，我们拥有的任何资源都定义如下：


export default class Invoices extends Model {
    resource() {
        return 'invoices';
    }

    get i18n() {
        return {
            en: {
                resource: 'Invoice | Invoices'
            },
            nl: {
                resource: 'Factuur | Facturen'
            }
        };
    }
}

当我们有一个特定于资源的组件时，我们想要执行以下操作：


<template>
   <div>
      Title could go here: Lis of all {{$tc('resource', 2}}
    </div>
</template>

<script>
    import models from './models';

    export default {
        data() {
            return {
                resource: new models[this.$route.params.resource](); 
            };
        }, 
        i18n: {
            sharedMessages: this.resource.i18n
        }
    }

这似乎不起作用。我还尝试使用一个函数拉入sharedMessages：

i18n: {
    sharedMessages: () => { return this.resource.i18n; }
}

那也没有解决。看来我们无法以这种方式使用它。我仔细检查并打印`{{resource.i18n.en.resource}}正确打印了我期望的字符串。

是否有任何关于我监督的想法，或者根本不支持我的想法，以及解决方法以获取我们想要的结果？

只需为其创建一个CodeSandBox。

再次感谢！大卫

Answer 1

您在这里只错过了一件事情。 i18n在vue组件中的data（）之前工作。因此this.resource无法使用。

要解决此问题，可以按以下方式使用它：

export default {
  name: "App",
  data() {
    return {
      resource: new TestClass()
    };
  },
  i18n: {
    messages: {
      en: {
        local: "Local message in English"
      },
      nl: {
        local: "Lokaal bericht in het Nederlands"
      }
    },
    sharedMessages: new TestClass().i18n,
  }
};

如果要继续处理数据，可以使用mergeLocaleMessage。

import i18n from '@/i18n.js'; //your plugin path.
i18n.mergeLocaleMessage(i18n.locale, this.resource.i18n[i18n.locale]);

基于组件值的vue-i18n sharedMessages似乎不起作用

1 个答案: