Vuetify - Как добавить HTML в метки слайдера

Question

Я использую Vuetify в своем приложении vue, и мне нужно указать теги HTML в ярлыках тиков, я проверил документ Vuetify, но обнаружил, что он принимает строку, а в случае передачи HTML он отображается как строка.Есть ли способ, которым мы можем внедрить HTML в метки тиков.Вот что я попробовал:

Ссылка на коде здесь: https://codepen.io/vishalgulati/pen/gOYyMza?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-card flat color="transparent">
      <v-subheader>Tick labels</v-subheader>

      <v-card-text>
        <v-slider
          v-model="fruits"
          :tick-labels="ticksLabels"
          :max="3"
          step="1"
          ticks="always"
          tick-size="2"
        ></v-slider>
      </v-card-text>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      value: 0,
      fruits: 0,
      ticksLabels: [
        '<span>&nbsp</span>',
        '',
        'Pear',
        'Apple'
      ]
    }
  }
})

Answer 1

Используйте шаблонный слот для большого пальца.Найдено в их документах:

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col class="pa-12">
        <v-range-slider
          :tick-labels="seasons"
          :value="[0, 1]"
          min="0"
          max="3"
          ticks="always"
          tick-size="4"
        >
          <template v-slot:thumb-label="props">
            <v-icon dark>
              {{ season(props.value) }}
            </v-icon>
          </template>
        </v-range-slider>
      </v-col>
    </v-row>
  </v-app>
</div>

...
  data: () => ({
    seasons: [
      'Winter',
      'Spring',
      'Summer',
      'Fall',
    ],
    icons: [
      'mdi-snowflake',
      'mdi-leaf',
      'mdi-fire',
      'mdi-water',
    ],
  }),

  methods: {
    season (val) {
      return this.icons[val]
    },
  },
})

источник: https://vuetifyjs.com/en/components/sliders#custom-range-slider кодовое имя: https://codepen.io/pen/?&editable=true&editors=101