vue.js - VUE Storefront：类别页面显示项目计数为字符串

Question

在 Category.vue 我有来自店面默认文件的以下代码行

{{ $t('{count} items', { count: getCategoryProductsTotal }) }} https://github.com/vuestorefront/vsf-default/blob/master/pages/Category.vue#L62

但它呈现为“{count} 个项目”，而不是 count var 的实际值。但是，如果我{{getCategoryProductsTotal}}在翻译语句之外添加，我会得到总计数的实际值。

Answer 1

我建议您在对象中插入计数，如下所示

i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { hello: 'hi there', count: '{val} items' },
      cn: { hello: '你好',  count: '{val} 项目' }
    }
  })

然后在模板中使用它

{{ $t('count', { val: getCategoryProductsTotal }) }}

笔记：

• getCategoryProductsTotal 应该是一个computed属性。

• 如果那是一种方法，那么像这样使用它

{{ $t('count', { val: getCategoryProductsTotal() }) }}

但总是更喜欢为这些用例计算

Answer 2

您应该指定您正在使用的 VSF 版本，以便我们可以在本地复制它。例如，我刚刚使用 VSF1.12.3（最新的稳定版本）和 vsf-default 主题（1.12.1）创建了一个新项目，它运行良好。