Html 如何从vuejs中复选框中的多个选定对象中获取名称

我有一个场景，我想从多个选中的复选框中获取名称，并根据选中的复选框显示div

问题：我有4个复选框，我想根据选中的复选框显示div。这些复选框是多个的，因此可以选择多个复选框并获取多个ID

以下是我为实现此功能所做的HTML代码：

             <b-row>
                <div v-for="services in getServices" :key="services.id">
                  
                  <input
                    type="checkbox"
                    multiple
                    :name="services.name"
                    v-model="selected"
                    :value="{ name: services.name, id: services.id }"

                  />
                  <label :for="services.name">{{ services.name }}</label>
                </div>
               
              </b-row>
                {{selected}}

当前问题：

---

我无法在所选的

部分中仅获取id/名称。如果我能得到它，我可以根据它显示div。但是，当我想保存/发布时，我也需要id。例如，将复选框的值更改为仅名称或id，并以此为基础

 <input
                    type="checkbox"
                    multiple
                    :name="services.name"
                    v-model="selected"
                    :value="services.id"

                  />
<div v-if="getNameFromId(selected[0]) == 'div1'">This is div1.</div>

methods: {
  getNameFromId: function (id) {
    return this.getServices.find(service => service.id === id).name;
  }
}


这是第一组。
方法：{
getNameFromId:函数（id）{
返回这个.getServices.find（service=>service.id==id）.name；
}
}
例如，将复选框的值更改为仅名称或id，并以此为基础

 <input
                    type="checkbox"
                    multiple
                    :name="services.name"
                    v-model="selected"
                    :value="services.id"

                  />
<div v-if="getNameFromId(selected[0]) == 'div1'">This is div1.</div>

methods: {
  getNameFromId: function (id) {
    return this.getServices.find(service => service.id === id).name;
  }
}


这是第一组。
方法：{
getNameFromId:函数（id）{
返回这个.getServices.find（service=>service.id==id）.name；
}
}
向数组添加属性：

<div v-for="service in services" :key="service.id">
  <input
    type="checkbox"
    multiple
    :name="service.name"
    v-model="service.selected"
    :value="{ name: service.name, id: service.id }"
  />
  <label :for="services.name">{{ service.name }}</label>
</div>
{{ selectedServices }}

这对我来说效果很好。
向数组添加属性：

<div v-for="service in services" :key="service.id">
  <input
    type="checkbox"
    multiple
    :name="service.name"
    v-model="service.selected"
    :value="{ name: service.name, id: service.id }"
  />
  <label :for="services.name">{{ service.name }}</label>
</div>
{{ selectedServices }}

这对我来说很好。
嗨。感谢您的回复，实际上我想在名称中显示div，然后使用id保存它。您可以创建一个计算属性或一个从id返回名称的筛选器。您可以告诉我如何显示div吗？为了帮助您更好地检查答案，我对其进行了编辑，以向您展示如何从id获取名称，但请注意，选定的是一个数组而不是对象。要访问它，请使用this.getServices，它位于数据中，对吗？您好。感谢您的回复，实际上我想在名称中显示div，然后使用id保存它。您可以创建一个计算属性或一个从id返回名称的筛选器。您可以告诉我如何显示div吗？为了帮助您更好地检查答案，我对其进行了编辑，以向您展示如何从id获取名称，但请注意，选定的是一个数组而不是一个对象。要访问它，请使用this.getServices，它位于数据中，对吗？如果我检查pedro，则会显示：
[{“id”：1，“name”：“pedro”，“selected”：true}]
，但是，如果我想使用：selectedServices:function（）{返回this.services.filter（（item）=>item.selected.map（item=>item.name）；}，好的，这有点帮助，但问题是如果我同时选择pedro和jose，我的两个div都不会出现。只有一个在放映。我将其用于两个div:
show pedro show jose
@alpachinoYou可以创建一个方法，如果name在所选数组中，则返回该方法，并在v-if中使用该方法。我已经更新了代码沙盒：如果我在pedro上检查，就会出现：
[{“id”：1，“name”：“pedro”，“selected”：true}]
，但是如果我想用：selectedServices:function（）{返回this.services.filter（（item）=>item.selected）.map（item=>item.name）；}，好的，这有点帮助，但问题是，如果我同时选择佩德罗和何塞，我的两个分区都不会出来。只有一个在放映。我将其用于两个div:
show pedro show jose
@alpachinoYou可以创建一个方法，如果name在所选数组中，则返回该方法，并在v-if中使用该方法。我已经更新了代码沙盒：