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

Question

我目前正在从事一个基于 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>)`

Answer 1

您可以使用 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>

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

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

vue.js

internationalization

vuetify.js

vue-i18n