如何使用 v-for 2 次来获取复选框操作表单中的特定值？

Question

我是 Vue js 新手。我正在尝试为 API 的其余部分做一个行动表。我不知道如何只获取名称和位置的数据。我试图在 Array 中使用 slice，但它不起作用。

我的行动形式：

<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

首先制作 Selected:false 布尔值...然后制作一个按钮并单击它会进入一个函数，该函数将接受一个参数，迭代您的数组和 select 一个匹配的对象参数

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

Answer 2

您可以在 :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>

如何使用 v-for 2 次来获取复选框操作表单中的特定值？

How to use v-for 2 times to get specific values in check-box action form?

javascript

arrays

checkboxlist

vue.js