Populate V-Select from Json - Vue JS

Question

I need to populate my v-select multiselect element from json object I tried but it didn't work

This is what I get

<v-select v-model="serviceValues" :items="serviceOptions" item-text="serviceOptions" clearable multiple>
</v-select>



    serviceOptions: {"youtube":0,
 "facebook":1,
 "whatsapp":2,
 "https":3,
 "tiktok":4,
 "udp":5,
 "bittorrent":6,
 "zoom":7,
 "http2":8,
 "ah_cdn":9,
 "cloudflare":10,
 "http":11,
 "bmff":12,
 "tcp":13,
 "google_api":14,
 "akamai":15,
 "telegram":16,
 "instagram":17,
 "facebook_messenger":18,
 "google_play":19,
 "windows_update":20,
 "netflix":21,
 "google_gen":22,
 "google_ads":23,
 "gstatic":24,
 "pubg":25,
 "appstore":26,
 "imo":27,
 "dailymotion":28,
 "icloud":29,
 "mpegts":30,
 "amazon_aws":31,
 "bigo":32,
 "google":33,
 "ssl":34,
 "rtp":35,
 "windows_marketplace":36,
 "google_docs":37,
 "mega":38,
 "steam":39,
 "samsung_update":40,
 "amazon":41,
 "snow":42,
 "ms_teams":43,
 "pinterest":44,
 "wechat":45,
 "gtalk":46,
 "eproxy":47,
 "electronic_arts":48,
 "office365":49,
 "unity":50,
 "evasive_protocol":51,
 "microsoft":52,
 "qqdownload":53,
 "psn":54,
 "dns":55,
 "viber":56,
 "apple":57,
 "huawei_update":58,
 "gcs":59,
 "mediafire":60,
 "gcm":61,
 "xiaomi":62,
 "snapchat":63,
 "alibaba_cloud":64,
 "quic":65,
 "apple_hls":66,
 "giphy":67,
 "gmail":68,
 "yahoo":69,
 "google_classroom":70,
 "google_photos":71,
 "battlenet":72,
 "huawei":73,
 "twitter":74,
 "samsung_apps":75,
 "ios_ota_update":76,
 "ironsource":77,
 "daraz":78,
 "anonytun_vpn":79,
 "applovin":80,
 "skype":81,
 "riffsy":82,
 "tango":83,
 "vimeo":84,
 "google_analytics":85,
 "qq_web":86,
 "avast":87,
 "taobao":88,
 "onedrive":89,
 "sharepoint_online":90,
 "fcm":91,
 "bytedance":92,
 "liftoff":93,
 "isakmp":94,
 "epic_games":95,
 "google_accounts":96,
 "clash_of_clans":97,
 "ppp":98,
 "opera_turbo":99,
 "ubisoft":100,
 "samsung":101,
 "uplive":102,
 "outlook":103,
 "uptobox":104,
 "blogger":105,
 "itunes":106,
 "zippyshare":107,
 "chrome_update":108,
 "ssh":109,
 "xboxlive":110,
 "uber":111,
 "fastly":112,
 "uptodown":113,
 "data_saver":114,
 "discord":115,
 "google_tags":116,
 "vungle":117,
 "apple_music":118,
 "mcafee":119,
 "odnoklassniki":120,
 "rtmp":121,
 "twitch":122,
 "redtube":123,
 "trafficfactory":124,
 "amazon_video":125,
 "appsflyer":126,
 "adobe":127,
 "uc_browser":128,
 "accuweather":129,
 "windows_azure":130,
 "ebay":131,
 "wetransfer":132,
 "websocket":133,
 "amazon_adsystem":134,
 "flash":135,
 "http_proxy":136,
 "speedtest":137,
 "dropbox":138,
 "mopub":139,
 "apns":140,
 "dtls":141,
 "chinanetcenter":142,
 "springtech_vpn":143,
 "bbc":144,
 "taboola":145,
 "unreal_engine":146,
 "archive":147,
 "google_maps":148,
 "spotify":149,
 "linkedin":150,
 "wistia":151,
 "vkontakte":152,
 "garena":153,
 "icmp":154,
 "bing":155,
 "hotspot_shield":156,
 "agora_io":157,
 "trafficjunky":158,
 "reddit":159,
 "github":160,
 "gameloft":161,
 "facetime":162,
 "imgur":163,
 "qqvideo":164,
 "adcolony":165,
 "alibaba":166,
 "origin":167,
 "malformed":168,
 "apple_location":169,
 "mgid":170,
 "qq_games":171,
 "mobile_legends":172,
 "shoutcast":173,
 "i2p":174,
 "xhamster":175,
 "skyvpn":176,
 "mixpanel":177,
 "gaana":178,
 "yandex":179,
 "wordpress":180,
 "llnwd":181,
 "tenor":182,
 "aliexpress":183,
 "lazada":184,
 "makemytrip":185,
 "line":186,
 "google_translate":187,
 "soundcloud":188,
 "adjust":189,
 "netease":190,
 "aptoide":191,
 "minecraft":192,
 "eskimi":193,
 "apple_update":194,
 "firefox_update":195,
 "gcp":196,
 "softonic":197}

Once after I select multiple services this is what serviceValues array should looks like serviceValues: [0,2,3,4,5,.....]

How can I display only keys(youtube,facebook,whatsapp,.etc..) on vue select and then when user select multiple services then those values should be stored on serviceValues array. like serviceValues=[0,1,2,ect...]

Ashwin Bande · Accepted Answer · 2021-01-18 07:45:13Z

1

create a computed property that transform your object in list of objects like {text: 'something', value: 2}, which is required in v-select.

Do it like this:

computed: {
   options() {
      return Object.entries(this.serviceOptions)
                .map(([key, value]) => ({text: key, value: value}));
   },
},

answered Jan 18, 2021 at 7:45

Ashwin Bande

3,1232 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nilesh Patel · Accepted Answer · 2021-01-18 08:17:16Z

1

create a computed property which convert object into array.

data(){
 return {
  serviceOptions:{
    "youtube":0,
    "facebook":1,
     ....
  }
 }
},
computed: {
   options() {
      return Object.entries(this.serviceOptions)
              .map(([key, value]) => ({text: key, value: value}));
   },
},

and bind it to items prop and do not forget to bind text property to item-text prop.

<v-select v-model="serviceValues" :items="options" item-text="text" clearable multiple>
</v-select>

answered Jan 18, 2021 at 8:17

Nilesh Patel

3,3079 silver badges13 bronze badges

Collectives™ on Stack Overflow

Populate V-Select from Json - Vue JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related