Vue项目使用i18n翻译后如何在译文后追加自定义字符

Vue 项目集成 vue-i18n 实现国际化时，需要在不改动原有翻译词条的前提下，给翻译返回结果追加自定义字符。原有可正常运行的代码如下：

<v-text-field
  v-bind:placeholder="$t('wordCapitalTitle')"
/>

上述代码可正常获取翻译值Title作为placeholder内容，需求是将显示值调整为Title*。直接拼接字符时出现异常：最终显示为wordCapitalTitle*，未正确读取翻译内容。

出现wordCapitalTitle*的核心原因是把自定义字符写在了$t()方法的入参内部，比如写成$t('wordCapitalTitle*')，此时i18n会将wordCapitalTitle*作为完整的翻译key去匹配词条，匹配不到时就会直接返回原始key字符串，导致显示异常。

模板内直接拼接（最简便） #

$t()方法本身会返回翻译后的字符串结果，直接在绑定表达式中对返回值做字符串拼接即可，不要修改传入的翻译key：

<!-- 模板字符串写法 -->
<v-text-field
  v-bind:placeholder="`${$t('wordCapitalTitle')}*`"
/>

<!-- 加号拼接写法，效果一致 -->
<v-text-field
  v-bind:placeholder="$t('wordCapitalTitle') + '*'"
/>

计算属性封装（适合复用场景） #

如果同一个拼接后的值需要在模板多处使用，可以将逻辑抽到计算属性中，避免重复书写：

computed: {
  requiredTitlePlaceholder() {
    return this.$t('wordCapitalTitle') + '*'
  }
}

模板中直接绑定计算属性：

<v-text-field
  v-bind:placeholder="requiredTitlePlaceholder"
/>

全局方法封装（适合通用规则场景） #

如果项目中存在大量类似「翻译结果+固定后缀」的需求（比如所有必填表单项都要追加*），可以注册全局通用方法减少重复代码：

// 全局注册带后缀的翻译方法
Vue.prototype.$tAppend = function (translateKey, suffix = '') {
  return this.$t(translateKey) + suffix
}

使用时直接传入翻译key和需要追加的后缀即可：

<v-text-field
  v-bind:placeholder="$tAppend('wordCapitalTitle', '*')"
/>

提示：所有方案都不会修改原有翻译词条，也不会影响i18n本身的语言切换、变量插值等原有逻辑，切换语言时后缀会跟随翻译结果正常显示。

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