vue-formulate - 以 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' }
]