Vue中v-model绑定对象数组，如何让复选框显示name属性？

你需要给<b-form-checkbox-group>组件指定文本字段和值字段的映射，因为组件默认会从对象中读取text和value属性，而你的数据结构是id和name，所以需要手动配置：

修改后的代码如下：

<b-dropdown text="Business Lines" variant="outline-dark" size="sm" class="filter-dropdown">
  <b-form-checkbox-group stacked size="sm" class="ml-2"
    v-model="formData.selectedBusinessLines"
    :options="formData.businessLines"
    text-field="name"
    value-field="id"                        
    >                        
  </b-form-checkbox-group>
</b-dropdown>

说明： #

• text-field="name"：告诉组件使用对象中的name属性作为复选框旁显示的文本
• value-field="id"：指定组件将对象的id属性作为选中后绑定到v-model的值（如果需要绑定整个对象，可以去掉这个属性，同时确保v-model绑定的数组能接收对象类型）

内容的提问来源于stack exchange，提问作者kickinchicken