Настройка меток флажков / радио в формате HTML

Question

Используя атрибут options при настройке массива элементов checkbox и / или radio, как можно настроить метку в формате HTML для каждого переключателя / флажка? Например, я хочу стилизовать дату / время с возвратом разрыва - см. Пример вывода ниже:

[ ] Tuesday, Jan 1
    5:00pm to 7:30pm
[ ] Wednesday, Jan 2
    6:00am to 8:00am
[ ] Friday, Jan 4
    1:00pm to 3:30pm

Вот код vue:

<FormulateInput 
  type="checkbox"
  label="Select dates that applies"
  :options="options"
  v-model="dates"
  >

Answer 1

Vue Formulate по умолчанию не использует v-html для меток (из соображений безопасности). Однако вы можете реализовать свой собственный slotComponent для меток, который это делает.

import VueFormulate from '@braid/vue-formulate'
import MyLabel from './MyLabel.vue'


Vue.component('MyLabel', MyLabel)

Vue.use(VueFormulate, {
  slotComponents: {
    label: 'MyLabel'
  }
})

// MyLabel.vue
<template>
<label
  class="context.classes.label"
  for="context.id"
  v-html="context.label"
/>
</template>

<script>
export default {
  props: {
    context: {
      type: Object,
      required: true
    }
  }
}
</script>

Затем в ваших объектах опций вы сможете использовать HTML строки в качестве ключей:

const dates = [
  { label: 'Tuesday, Jan 1<br>5:00pm to 7:30pm': value: '01-01-2020' }
  { label: 'Wednesday, Jan 2<br>6:00am to 8:00am': value: '01-02-2020' }
]