Vue3 & i18n：如何在value、placeholder等组件属性中使用国际化

问题原因 #

Vue 中不支持在 HTML 原生属性（如 value、placeholder、title 等）的属性值里直接使用 {{ }} 插值语法，所有动态属性值都需要通过 v-bind 指令（可简写为:）绑定。

正确实现方式 #

只需要把你要动态赋值的属性前加冒号，将 $t() 作为表达式传入即可：

• 提交按钮value国际化示例：

<!-- 错误写法 -->
<input type="submit" value="{{ $t('form.submit') }}" class="xxx" />

<!-- 正确写法 -->
<input type="submit" :value="$t('form.submit')" class="xxx" />

• 输入框placeholder国际化示例：

<!-- 错误写法 -->
<input type="text" placeholder="{{ $t('form.username.placeholder') }}" />

<!-- 正确写法 -->
<input type="text" :placeholder="$t('form.username.placeholder')" />

• 自定义组件的props国际化也是一样的逻辑，所有需要动态传值的属性都用v-bind绑定即可。

拓展说明 #

如果你使用的是组合式API的setup语法糖，没有全局注入$t的话，可以先引入i18n实例的useI18n方法获取t函数再使用：

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

<template>
  <input type="submit" :value="t('form.submit')" />
</template>

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