Variables in vue-i18n-next do not work when using composition API in setup script of Vue 3.2
In a vue 3.2 project, I'm using the vue-i18n-next v9, composition api and <script setup> methods.
I'm trying to create a translation message using some variables indicated by {}'s. For example
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.`
}
My vue component looks like this:
<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>
The result is a string without a variable partAfter reviewing the above invoices, I found that there are currently approximately differences between these invoices and your
Previously, when using vue-i18n-next package and options api in vue 2, there was no problem and strings and variables were formed correctly. The code is as follows:
<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>
The output is After reviewing the above invoices, I found that there is currently a difference of approximately $2500,00 in your overall advantage on these invoices.
Any idea what has changed with the composition api methods or what I might be doing wrong?
