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

【问题标题】：Bootstrap Vue: How can I render custom text-field for an array of strings?Bootstrap Vue：如何为字符串数组呈现自定义文本字段？
【发布时间】：2020-12-27 09:40:33
【问题描述】：

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

<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');
    },
}

如何以人性化的方式格式化文本？感谢您的任何建议！

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

默认情况下，复选框组件使用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>

【讨论】：