在 Vue.js 中显示 i18n 文本中的组件

Question

我想在段落文本中添加按钮组件。我可以像下面的第一个示例一样手动完成。但是，由于我的文本来自 i18n 值，我需要将其导入文本中。有没有办法像第二个示例一样将按钮像变量一样放在 i18n 文本中？

<p>
  1) Use
  <v-btn @click="attachmentDialog.show(item)" v-on="on">
    <v-icon small left>mdi-pencil</v-icon>Edit
  </v-btn>
  button to add booking.
</p>
<p>
  2)
  {{ $t("no_booking_info", { buttonName: $t("edit") }) }}
</p>

en.js

export default {
  no_booking_info: "Use {buttonName} button to add booking."
}

Answer 1

我在 vue-i18n 文档中here找到了一些有关组件插值的内容。

这就是我解决问题的方法：

<i18n path="no_booking_info" tag="p" for="edit">
  <v-btn class="mx-2" @click="editAction">
    <v-icon left>mdi-pencil</v-icon>
      {{ $t("edit") }}
  </v-btn>
</i18n>

en.js

export default {
  no_booking_info: "Use {0} button to add booking.",
  edit: "Edit"
}

Answer 2

希望我能很好地理解你的问题。

Use <v-btn v-html="$t('no_booking_info', { buttonName: $t('edit') })" /> button to add booking.

Answer 3

@salihtopcu 提供的解决方案对我来说是一个很好的指导，但自从它发布以来，发生了很多变化。

更多最新文档位于此处：

主要变化是：

1. 你应该使用

   <i18n-t>

   组件而不是i18n

2. path

   属性现在是

   keypath

   。

3. 您可以使用命名槽来代替 {0}，以获得额外的可读性和灵活性。

   {{ 更改限制 }} {{ $t('改变') }}

您可以在“信息”的翻译中使用 {limit} 或 {action}。

关键词是

“翻译组件的子组件使用区域设置进行插值 keypath 属性的消息。”