使用 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 然后如果它找到它也会 return 它的值。这些值必须在所有本地化文件中键入。您必须如下所示将这些行添加到 json 文件中才能正常工作：

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

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

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

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

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

Translate text coming from the script using Vue-i18n

javascript

localization

vue.js

vue-i18n