在 Vuejs 中的组件上显示翻译

Question

我想显示组件标题的翻译。这是 HTML 代码：

   <user-card
      :totalUser="totalUsers"
      color="primary"
      icon="UserIcon"
      user-title="Total users"
  />

在我的 user-card 组件上我有这个：

  <b-card class="text-center">
    <b-avatar
        :variant="`light-${color}`"
        class="mb-1"
        size="45"
    >
      <feather-icon
          :icon="icon"
          size="21"
      />
    </b-avatar>
    <div class="truncate">
      <h2 class="mb-25 font-weight-bolder">
        {{ totalUser}}
      </h2>
      <span>{{ user-title }}</span>
    </div>
  </b-card>

为了使用翻译，我有这样的语法，我从 JSON 文件中获取翻译的术语：

{{$t("Total users")}}

如何在 user-title 上实现它？

Answer 1

只需使用 v-bind 并将表达式直接传递给 user-card 组件：

<user-card
    ...
    :user-title="$t('Total users')"
/>

你实际上已经在多个地方使用了这个语法，这个指令只是告诉 Vue “动态绑定一个或多个属性，或者一个组件 prop 到一个表达式”，这正是你在这里寻找的.

这会将 $t('Total users') 作为表达式求值，然后将结果作为 prop 传递给您的组件。

Answer 2

看看这个，我已经尝试在代码沙箱中复制您的场景。

sample app

你做错的是 $t 是一个接受变量名的函数，其中有一个实际的消息，首先你必须像我一样为多种语言定义一个变量，例如 totalUserTitle: 'Total users'在 index.js 中，然后您可以将其用作 $t(totalUserTitle)。

在 Vuejs 中的组件上显示翻译

Display translation on a component in Vuejs

localization

vuejs2

vue-i18n