如何使用v-2次获得复选框操作形式中的特定值？

Question

我是Vue js的新手。我正在尝试为API的其余部分做一个操作表单。我不知道如何只获取姓名和地点的数据。我试图在Array中使用片，但它不起作用。

我的行动表：

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

我的Vue实例

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: ''
                 
        };
    }
}

选中复选框的第一个选项时的输出：

Selected: ["_id": "d4d81da6-b453-4a31-999f-a2ea04848ee9", "name": "A", "location": "US", "__v": 0]

选中复选框的第一个选项时的预期输出：

Selected: [ "name": "A", "location": "US" ]

Answer 1

您可以在:value=""分配中创建必要的结构。

 <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>

Answer 2

首先使Selected:false布尔值.然后按一下按钮，它就会得到一个接受参数的函数，迭代数组并选择一个与参数匹配的对象

    private selectFun(item){this.events.filter(val=>{val._id===item._id})//and then whatever}