时间戳

首页 > 解决方案 > 如何从vuejs复选框中的多个选定对象中获取名称

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

我在脚本方面也有这个：

return {
    selected: [],
}

目前的问题：

我不能只在该selected部分中获得 id /name。如果我能得到它，我可以根据它显示 div。但在我想保存/发布时，我也需要有 ID

标签： htmlvue.jsvuejs2

解决方案

例如，将复选框的值更改为仅 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;
  }
}

推荐阅读