Use HTML inside vuetify v-text-field props

Question

I'd like to use some html tags (sup, sub) inside vuetify's v-text-field label and suffix, but the below is not working. Any way to achieve that?

<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/

Answer 1

If you look into the source codes for v-text-field, you will see it extends from v-input, then you will see v-input has two slots named prepend and append (not sure why these two slots are not in the Vuetify Guide, you may want to issue one feature request). You can use these two slots to implement the goal like below demo:

Or you want to try 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/[email protected]/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/[email protected]/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>