使用 Vue-i18n 翻译来自脚本的文本

Question

我安装了 vue-i18n 插件并按照tutorial 中提到的步骤进行操作。 我现在将所有可替换的标签从英语更改为我拥有本地化文件的所有语言。我的问题是我想翻译来自页面 JavaScript 部分的消息，例如错误文本或弹出的通知......等等。

例如，我的字段中有占位符，我想翻译它们，所以我的模板如下所示：

<b-form-input
        id="password"
        v-model="passwords.currentPassword"
        :placeholder="placeholders.currentPassword"
        type="password"
      />

在脚本中我将文本设置如下

data() {
return {
  placeholders: {
    //currentPassword: "Enter your current password",
    currentPassword: this.$t("changePassword.newPasswordPlaceholder"),
    newPassword: "Enter your new password",
    confirmPassword: "Confirm your new Password"
  }

我尝试了这个解决方案，但我在字段中得到的文字是：changePassword.newPasswordPlaceholder

我尝试将 i18n 作为组件调用，但失败了……有没有办法在模板 (html) 之外设置变量值？

Answer 1

currentPassword: this.$t("changePassword.newPasswordPlaceholder")

此代码在本地化文件中查找当前语言。首先使用键changePassword 查找json 值。如果找到，那么它会寻找键 newPasswordPlaceholder，然后如果找到它也会返回它的值。这些值必须在所有本地化文件中输入。您必须将这些行添加到 json 文件中，如下所示：

//json file where all localisation key : value pairs stored

"changePassword": {
    "newPasswordPlaceholder" : "text of password placeholder"
}

定义这些值后，您可以使用示例中描述的翻译。也不需要像代码:placeholder="placeholders.currentPassword" 中那样从对象调用。可以直接使用i18n。

:placeholder="$t('changePassword.newPasswordPlaceholder')"