时间戳

首页 > 解决方案 > 使用 Vue-i18n 翻译来自脚本的文本

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

问题描述

我安装了 vue-i18n 插件并按照本教程中提到的步骤进行操作。我现在将所有可替换的标签从英语更改为我拥有本地化文件的所有语言。我的问题是我想翻译来自页面 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）之外设置变量值？

标签： javascriptvue.jslocalizationvue-i18n

解决方案

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

此代码在本地化文件中查找当前语言。那里首先用 key 寻找 json 值changePassword。如果找到，那么它将寻找密钥，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')"

推荐阅读