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

Question

我安装了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）外部设置变量值？

Answer 1

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')"