Use HTML inside vuetify v-text-field props

user_826060 0
Viewed 11181

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/

vuetify.js vue.js
1 Answers

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

user_56658700
Related