根据所选语言动态打印变量值

Question

我在显示数据时遇到问题，我必须根据所选语言打印变量值。让我通过实例进一步解释我的问题。

我有两个选项来显示一些文字

<template>
   {{i.translations.en.header}}
   {{i.translations.sl.header}}
</template>

我有从cookie中读取所选语言环境的功能

export default {
    name: 'myComponent',
    data() {
        return { 
            selectedLanguage: '',
        }
    },
    mounted: function () {
        this.getFrontPageSlides();
        this.selectedLanguage = Cookie.get('locale');
        console.log(this.selectedLanguage);
        // returns en or sl if i print
    },
}

我的问题是如何正确格式化我的变量，以便模板语法显示所需的值？

我已经尝试过{{i.translations.selectedLanguage.header}}和{{i.translations.this.selectedLanguage.header}}，但我只会遇到错误

如果您需要任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

你会这样做：

{{i.translations[selectedLanguage].header}}