Vuetify 多选 - 将所选项目作为 JSON 对象获取答案

【问题标题】：Veutify multiselect - get the selected items as JSON objectVuetify 多选 - 将所选项目作为 JSON 对象获取
【发布时间】：2020-12-12 11:42:45
【问题描述】：

我已将 JSON 对象填充到 v-select 中，它工作正常，但我需要将所选项目作为 JSON 对象获取，目前我将其作为数组获取，但我需要它作为 JSON 对象。

 <v-select
      v-model="timeBandValues"
      :items="timeBandOptions"
      item-text="timeBandId"
      item-value="timeBandId"
      label="Select"
      multiple
      chips
      hint="What are the target regions"
      persistent-hint
    ></v-select>

我填充了这个 axios json 对象（假设我从三个项目中选择了两个项目 1,2）

    timeBandOptions = [
        {
            "timeBandId": 1,
            "start": "14:30:00",
            "end": "22:00:00",
            
        },
        {
            "timeBandId": 2,
            "start": "15:30:00",
            "end": "23:00:00",
           
        },
        {
            "timeBandId": 3,
            "start": "16:00:00",
            "end": "21:00:00",
            
        }
    ]

我有数组来存储选定的项目

timeBandsValues[]

实际输出

timeBandsValues[1,2]

预期输出

timeBandsValues[
        {
            "timeBandId": 1,
           
            
        },
        {
            "timeBandId": 2,
           
        }
]

【问题讨论】：

标签： javascript json vue.js axios vue-component

【解决方案1】：

将return-object 属性添加到您的选择中以返回整个对象：

  <v-select
    v-model="timeBandValues" :items="items" item-text="timeBandId"
     item-value="timeBandId" label="Select" 
     return-object
     multiple chips hint="What are the target regions" persistent-hint></v-select>

然后您可以使用map 仅返回所需的字段，例如：

 timeBandValues.map(val=>val.timeBandId)

【讨论】：