微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Veutify multiselect-将所选项目作为JSON对象获取

如何解决Veutify multiselect-将所选项目作为JSON对象获取

我已经将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,}
]

解决方法

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)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。