Bootstrap Vue：如何呈现字符串数组的自定义文本字段？

如何解决Bootstrap Vue：如何呈现字符串数组的自定义文本字段？

我正在为日期数组渲染一个复选框组。目前，一切正常，但是我想格式化呈现的文本。

<b-form-checkBox-group
    id="checkBox-group-1"
    v-model="my_dates"
    :options="options"
    name="flavour-1"
    :text-field="formattedDate(date)"
    stacked>
</b-form-checkBox-group>

每个复选框的标签为2020-09-08。

我想做的是让每个复选框呈现如下内容： Friday,September 8th,2020。

以下是我的.vue文件的示例：

// later...

data: {
    options: ['2020-09-08','2020-09-10']
},methods:{
    formattedDate(date) {
        return moment(date).format('dddd,MMMM Do,YYYY');
    },}

如何以人类友好的方式设置文本格式？谢谢您的任何建议！

解决方法

默认情况下，复选框组件使用value和text属性（如果存在），仅使用纯字符串。

请参见https://bootstrap-vue.org/docs/components/form-checkbox#checkbox-group-options-array

您可以做的是构造一个计算属性以反映这一点

computed: {
  formattedOptions: ({ options }) => options.map(value => ({
    value,text: moment(date).format('dddd,MMMM Do,YYYY')
  })
}

然后在options道具中使用它

<b-form-checkbox-group
  id="checkbox-group-1"
  v-model="my_dates"
  :options="formattedOptions"
  name="flavour-1"
  stacked
></b-form-checkbox-group>