是否可以在选择对话框中使用i18n进行翻译

Question

我有一个<q-select>下拉框，其中填充了语言列表。我想让这个框显示翻译版本中的语言列表。例如，如果选择的语言是英语，则框将显示"；英语"；。然而，如果所选择的语言是德语，则框将显示"德语"；Englisch"；。

这是我的选择对话框，也是我获取值的方式：

<q-select v-model="model" :options="options" option-label="language" option-value="text">
<template v-slot:prepend>
created: function () {
let options = this.$store.state.languages.options;
this.options = options;
this.options.map(x=>{
if(x.code == this.$store.state.globals.language){
this.model = x;
}
});
},

这是从vuex商店填充的：

export default function () {
return {
options: [ //please alphabetize options as they are added
{language:'Dutch',code:'nl-NL',flag:'https://img.icons8.com/emoji/48/000000/netherlands-emoji.png',text:'Begin met spelen'},
{language:'English',code:'en',flag:'https://img.icons8.com/emoji/48/000000/united-states-emoji.png',text:'Start Playing'},
{language:'German',code:'de-DE',flag:'https://img.icons8.com/emoji/48/000000/germany-emoji.png',text:'Jetzt Spielen'},
{language:'Spanish',code:'es-ES',flag:'https://img.icons8.com/emoji/48/000000/spain-emoji.png',text:'Empezar a jugar'},
{language:'Portuguese',code:'pt-BR',flag:'https://img.icons8.com/emoji/48/000000/portugal-emoji.png',text:'Comece a Jogar'}
]
};
}

每种语言都有一个"；语言；我想在CCD_ 2中使用。我最初的想法是在q-select中，然后我只会为选项标签调用$t('language')，但这没有任何作用。

我想到的另一个选项是循环浏览选项，创建一个新的本地版本，然后在循环浏览时应用翻译。理论上，这应该有效，但我还没有尝试过这种选择。我对你可能有的任何其他想法或选择持开放态度。

感谢

Answer 1

如果您想动态转换选项，您应该为option-value道具提供一个函数：

<q-select v-model="model" :options="options" option-label="language" :option-value="translatedLanguage">
methods:
{
translatedLanguage(option)
{
return option ? this.$t(option.text) : null;
}
}