Vue中如何匹配API对象键与翻译文件键并遍历展示？

问题场景 #

从API获取的数据对象：

var data= { "Date": "01-01-2024", "Code": "5000", "region": "NA" } 

vue-i18n的en.json翻译文件：

{"info": {
    "Code": "CODE",
    "Date": "DATE",
    "region": "REGION"
  }}

用于遍历展示的Vue代码：

<v-list  v-for="(value, key) in data" :key="key">
  <v-list-item>
       <v-list-item-content>
            <v-row>
                <v-col>
                   {{ $t(`info.$key`) }}
                 </v-col>
                 <v-col>
                   {{ value }}
                  </v-col>
             </v-row>
         </v-list-item-content>
    </v-list-item>
</v-list>

期望输出 #

DATE    01-01-2024
CODE    5000
REGION  NA

实际输出 #

info.$key  01-01-2024
info.$key 5000
info.$key NA

同时控制台出现警告：Not found 'info.key' key in 'en' locale messages.

问题原因 #

你在模板字符串中错误地将$key作为字面量使用，而非引用循环中的key变量。$t(info.$key)会被解析为查找翻译键info.$key，但你的en.json中不存在这个键，因此触发警告，并且直接显示原始的键路径字符串。

修正方案 #

需要在模板字符串中通过变量插值插入循环的key，将info.$key改为info.${key}，也可以使用字符串拼接的方式：

修正后的代码 #

<v-list  v-for="(value, key) in data" :key="key">
  <v-list-item>
       <v-list-item-content>
            <v-row>
                <v-col>
                   <!-- 模板字符串插值变量key -->
                   {{ $t(`info.${key}`) }}
                   <!-- 或字符串拼接写法：{{ $t('info.' + key) }} -->
                 </v-col>
                 <v-col>
                   {{ value }}
                  </v-col>
             </v-row>
         </v-list-item-content>
    </v-list-item>
</v-list>

验证结果 #

修改后，$t会根据循环的key（如Date、Code、region）正确匹配对应的翻译值，输出符合预期，控制台的警告也会消失。

内容的提问来源于stack exchange，提问作者Divya Bharathi