Question

我正在使用vuex-i18n来转换我的字符串和bootstrap-vue以进行样式设置。每个引导程序组件都有我需要翻译的道具：

<b-input id="input2" placeholder="Username" />

Vue将原始文本（此处为用户名）绑定到占位符-prop，并且很明显它被逐字呈现（用户名）。

如果我要翻译占位符，我认为我必须将其绑定到变量或计算属性

<b-input id="input2" :placeholder="username" />

并将其翻译为脚本部分：

computed: {
  username() {
    return this.$t('forms.placeholders.username')
  }

这变得非常冗长。有更好的方法吗？

说明：我要避免的是，必须创建许多计算属性，这些属性基本上返回属性名称的转换后的字符串：

placeholder=*username*
...
*username* ()
  return $t('*username*')

Answer 1

您可以直接将本地化的字符串传递到prop中，而不必在目标组件内部进行处理：

<b-input id="input2" :placeholder="$t('forms.placeholders.' + username)" />

您还可以通过创建vue plugin来包装该代码并使之更短来创建一个辅助函数：

Vue.use({
    install(Vue) {
        Vue.prototype.localizedTextFct = function (placeholder) {
            return this.$t('forms.placeholders.' + placeholder)
        }
    }
});

new Vue({
    ...
})

，您现在可以像这样使用助手功能：

<b-input id="input2" :placeholder="localizedTextFct(username)" />

在Vue.js中翻译道具

1 个答案: