Блог

Главная - Вопросы по программированию - Отображение перевода на компоненте в Vuejs

Отображение перевода на компоненте в Vuejs

#vuejs2 #localization #vue-i18n

Вопрос:

Я хочу показать перевод названия компонента. Вот 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 ?

Комментарии:

1. что такое {{$t(«Общее количество пользователей»)}} ? вкратце, что такое $t

2. @MohsinAmjad-это функция перевода, предоставляемая Vue I18n.

3. доступен ли $t в this таком контексте.$t в вашем скрипте ?

4. ты хочешь сказать вот так ? user-title="$this.$t("Total users")"

Ответ №1:

Взгляните на это, я попытался воспроизвести ваш сценарий в песочнице кода.

пример приложения

Что вы делаете неправильно, так это то, что $t-это функция, которая принимает имя переменной, в котором содержится фактическое сообщение, сначала вам нужно определить переменную, например, totalUserTitle: «Всего пользователей» для нескольких языков, как я сделал в index.js, а затем вы можете использовать его как $t(totalUserTitle) .

Ответ №2:

Просто используйте v-bind и передайте выражение непосредственно вашему user-card компоненту:

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

На самом деле вы уже используете этот синтаксис в нескольких местах, эта директива просто указывает Vue «динамически привязывать один или несколько атрибутов или компонент к выражению», что именно то, что вы ищете здесь.

Это будет оцениваться $t('Total users') как выражение, а затем передаст результат вашему компоненту в качестве опоры.

Метки: