如何在 Vuetify 国际化中插入 <a> 标签或图标?

How to insert a <a> tag or icon inside Vuetify internationalization?

我目前正在从事一个基于 Vuetify 的项目。我需要在国际化文本中插入一个 <a> 标签和图标。一般插入一个变量很容易,如下所示,

this.$vuetify.lang.$t('I'm {0}', varirable_name)

但是这样,我无法插入<a>标签或图标<v-icon>,我该如何实现呢? 就这样,

`this.$vuetify.lang.$t('Here is an icon {0} and a {1}', <v-icon />, <a>link</a>)`

您可以使用 v-html 指令输出原始 HTML。它适用于基本标签,但不适用于 Vuetify 的 v-tags(例如,v-icon)。

new Vue({
  vuetify: new Vuetify(),
  data() {
    return {
      message: this.$vuetify.lang.t('Here is an bold {0} and a {1}', "<strong>text</strong>", "<a>link</a>")
    }
  }

}).$mount('#app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">


<div id="app">
  <v-app>
    <v-main>
      <v-container><span v-html="message"></span ></v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

我不建议在复合格式字符串中使用 Vuetify 标签。相反,翻译标签内的文本。

<v-btn class="ma-2" color="primary" dark>
    Accept  // <- translate only this
    <v-icon dark right>
        mdi-checkbox-marked-circle
    </v-icon>
</v-btn>