在Vue 3.2的setup脚本中使用组合式API时,vue-i18n-next中的变量无法工作
P粉420868294
P粉420868294 2023-12-05 22:04:07
0
1
606

在 vue 3.2 项目中,我正在使用 vue-i18n-next v9、composition api<script setup> 方法。

我正在尝试使用 {}'s 指示的一些变量创建翻译消息。例如

export default {
    conclusion: `After reviewing the above invoices, it was found that there is currently a difference of about {total_difference} in your {advantage_type} on the whole of these invoices.`
}

我的 vue 组件如下所示:

<script setup>
    import { ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { getHumanPrice } from '@/utils/helpers';

    const { t } = useI18n();

    const total_difference = ref(2000);

    const conclusion = computed(() => {
        return t('conclusion', 1, {
            total_difference: total_difference.value
            advantage_type: total_difference.value >= 0 ? t('advantage', 1).toLowerCase() : t('disadvantage', 1).toLowerCase(),
        });
    });
</script>

结果是一个不带可变部分的字符串查看上述发票后发现,目前这些发票整体上与您的存在大约差异

以前,在 vue 2 中使用 vue-i18n-next 包和 options api 时,没有问题,并且字符串与变量正确形成。代码如下所示:

<script>
    export default: {
        data() {
            return {
                total_difference: 2000,
            }
        },
        computed: {
            conclusion() {
                return this.$tc('conclusion', 1, {
                    total_difference: this.$filters.getHumanPrice(this.total_difference, 2),
                    advantage_type: this.total_difference >= 0 ? t('advantage', 1).toLowerCase() : t('disadvantage', 1).toLowerCase(),
                });
            },
        }
    }
</script>

输出为 查看上述发票后,发现目前您在这些发票整体上的优势存在约 $2500,00 的差异。

知道组合 api 方法发生了什么变化或者我可能做错了什么吗?

P粉420868294
P粉420868294

全部回复(1)
P粉434996845

$tc 提供了复数翻译,它的直接替代品是 tc:

tc('conclusion', 1, { ... })

t 是通用翻译函数,虽然它允许使用复数,但它不能接受命名插值的对象作为参数,因为可能有 其他选项,在本例中应该是:

t('conclusion', 1, { named: { ... } })
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板