如何在Vue复选框表单中使用两次v-for获取name和location指定字段值

解决方案 #

核心问题说明

你当前的写法是把完整的event对象绑定给了复选框的value，所以选中时会拿到全量字段；同时多选场景下selected初始值需要是数组，你之前设为空字符串会存在类型匹配问题。另外slice是数组的截取方法，无法处理对象字段的过滤，所以之前尝试不生效。

方案1：直接修改value绑定（最简便）

直接在复选框的value处只传入你需要的字段即可：

<div class="form-group">
   <label class="required"> Social Media </label>
   <b-form-checkbox  v-for="event in events" :key="event._id" :value="{name: event.name, location: event.location}" v-model="selected">
               {{event.name}}, {{event.location}}
   </b-form-checkbox>
   <span class="mt-3">Selected: <strong>{{ selected }}</strong></span>
</div>

修改Vue实例中selected的初始值：

export default {
    data() {
        return {     
            events: [{
                 "_id": "d4d81da6-b453-4a31-999f-a2ea04848ee9",
                 "name": "A",
                 "location": "US",
                 "__v": 0
                 },
                 {
                 "_id": "91205d34-4480-4e4e-bdf7-fe66e46922b0",
                 "name": "B",
                 "location": "Korea",
                 "__v": 0
                 },
                 {
                 "_id": "0b168c44-4f38-4f86-8ee6-e077333aca95",
                 "name": "C",
                 "location": "Japan",
                 "__v": 0
                 }],
           selected: [] // 改为空数组适配多选逻辑
                 
        };
    }
}

方案2：计算属性过滤（适用需要保留全量选中数据的场景）

如果后续业务还需要用到选中项的_id等其他字段，可以不修改value绑定，新增计算属性做字段过滤：

export default {
    data() {
        return {     
            events: [/* 原有events内容不变 */],
            selected: [] // 同样需要修改初始值为空数组
        };
    },
    computed: {
        // 新增格式化后的选中数据，提交接口时用这个字段即可
        filteredSelected() {
            return this.selected.map(item => ({
                name: item.name,
                location: item.location
            }))
        }
    }
}

模板输出处调整为：

<span class="mt-3">Selected: <strong>{{ filteredSelected }}</strong></span>

修改完成后选中第一个选项的输出就是你需要的[{name: "A", location: "US"}]。

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