javascript - 使用 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')"