我需要从我尝试过的 json 对象中填充我的 v-select 多选元素,但它没有用
这是我得到的
<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}
一旦我选择了多个服务,这就是 serviceValues 数组的样子 服务值:[0,2,3,4,5,.....]
如何在 vue select 上仅显示键(youtube、facebook、whatsapp 等),然后当用户选择多个服务时,这些值应存储在 serviceValues 数组中。像 serviceValues=[0,1,2,ect...]
答案 0 :(得分:1)
创建一个计算属性,将您的对象转换为对象列表中的对象,例如 {text: 'something', value: 2}
,这在 v-select
中是必需的。
这样做:
computed: {
options() {
return Object.entries(this.serviceOptions)
.map(([key, value]) => ({text: key, value: value}));
},
},
答案 1 :(得分:1)
创建一个将对象转换为数组的 computed
属性。
data(){
return {
serviceOptions:{
"youtube":0,
"facebook":1,
....
}
}
},
computed: {
options() {
return Object.entries(this.serviceOptions)
.map(([key, value]) => ({text: key, value: value}));
},
},
并将其绑定到 items
道具,不要忘记将 text
属性绑定到 item-text
道具。
<v-select v-model="serviceValues" :items="options" item-text="text" clearable multiple>
</v-select>