在 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

希望我理解你的问题。

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

Answer 2

我在 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"
}

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

Display a component within an i18n text in Vue.js

internationalization

vue.js

vuetify.js

vue-i18n