在 vuetify v-text-field 道具中使用 HTML答案

【问题标题】：Use HTML inside vuetify v-text-field props在 vuetify v-text-field 道具中使用 HTML
【发布时间】：2019-02-09 18:56:13
【问题描述】：

我想在 vuetify 的 v-text-field 标签和后缀中使用一些 html 标签（sup、sub），但是下面的不行。有什么方法可以实现吗？

<v-text-field :label='mylabel' :suffix='mysuffix'></v-text-field>

new Vue({
  el: '#app',
  data: {
    mylabel: 'A<sub>s</sub>',
    mysuffix: 'mm<sup>2</sup>',

  },
});

https://jsfiddle.net/63t082p2/489/

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

如果您查看 the source codes 中的 v-text-field，您会看到它从 v-input 扩展而来，然后您会看到名为 prepend 和 append 的 v-input has two slots （不知道为什么这两个插槽不在 Vuetify 指南中，您可能想issue one feature request）。您可以使用这两个插槽来实现如下演示的目标：

或者你想试试another slot named label。

new Vue({
  el: '#app',
  data: {
    mylabel: 'Test Label',
    mysuffix: 'Test suffix',
  },
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.js"></script>

<v-app id="app">
  <v-text-field :label='mylabel' :suffix='mysuffix'>
    <template slot="prepend"><i>Label: <sub>{{mylabel}}</sub></i></template>
    <template slot="append"><i>Suffix: <sub>{{mylabel}}</sub></i></template>
  </v-text-field>
</v-app>

【讨论】：

非常感谢！我最终使用了：